How can I style code listings using CSS?

后端未结

关注

 6  1668

I\'d like to display snippets of programming language code, and also HTML code, inside an HTML document using CSS. I want it to be indented and in fixed-width font... I\'m think

相关标签:

6条回答

暗喜

2021-01-30 00:30

First, I would show the code in a <pre> </pre> element give the pre element a nice style in your css and call it a day.

0 讨论(0)
发布评论:

提交评论
- 加载中...
逝去的感伤

2021-01-30 00:34
Sharing an example I use in website, I do use following pre in my stylesheet:
```
pre {
    background: #f4f4f4;
    border: 1px solid #ffffd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}
```
This gives the following results:

Disclaimer: In my leisure time, I have spend few hours to update this CSS with a bit extra features like code lines and code Copy button using CSS with JavaScript to my personal use that I like to share. Please use as you like github source code.
0 讨论(0)
发布评论:

提交评论
- 加载中...
甜味超标

2021-01-30 00:41
You can take a look at the prismjs to highlight the code.

You can customise the package as your wish from here and the footprint of this package will be still minimal.

Once you have a package, then you can use it as below:
```
<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="themes/prism.css" rel="stylesheet" />
  </head>
  <body>
    ...
    <script src="prism.js"></script>
  </body>
</html>
```
Once the above setup is done, then you can use it like below:
```
<pre><code class="language-css">p { color: red }</code></pre>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
野趣味

2021-01-30 00:46
Well, you could try using a <pre> tag in your blockquote to preserve the formatting first, and then use a monospaced font, like courier for the css style.

Something like this would work in the css:
```
pre {
  font-family:     "Courier New"
                    Courier
                    monospace;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
深忆病人

2021-01-30 00:48
<pre> would automatically retain your tabs and line-breaks within the bounding pre tags. Most browsers automatically default to a monospaced font inside pre but if you want to force it, (which is a good idea) you can use the following CSS:
```
pre { font-family: monospace; }
```
I would recommend that you not place code directly into a <blockquote> element. It is semantically incorrect.

If you want your code to be semantically correct, you should mark it up like this:
```
<pre><code>
My pre-formatted code
    here.
</code></pre>
```
If you are actually "quoting" a block of code, then the markup would be:
```
<blockquote><pre><code>
My pre-formatted "quoted" code here.
</code></pre></blockquote>
```
If you want even better-looking code, you can employ Google Code's Prettify which is used by StackOverflow to color code-snippets. It has it's own stylesheets that it automatically imports based on what language it thinks the code is and colors the code accordingly. You can give it a hint as to what language the code is by appending a class.
0 讨论(0)
发布评论:

提交评论
- 加载中...
别那么骄傲

2021-01-30 00:49

This javascript library seems excellent:

https://highlightjs.org/

UPDATE: I also used this on my Tumblr-based blog because it was easiest to deploy:

https://github.com/google/code-prettify

and I have used this one also (some extra features):

http://alexgorbatchev.com/SyntaxHighlighter/

0 讨论(0)
发布评论:

提交评论
- 加载中...