CSS help: how to format code block and code line?

Question 1

I notice code block which is tagged with

<pre><code>this is my code block</code></pre>

and code line which is tagged with<code>this is code line</code> when Markdown converted to HTML.

Stack-overflow or Github has implemented such kind of css style. So I hacked Github css file: http://github.github.com/github-flavored-markdown/shared/css/documentation.css

Simply using below style doesn't work:

code {
 font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
 color: #52595d;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 border: 1px solid #ccc;
 background-color: #f9f9f9;
 padding: 0px 3px;
 display: inline-block;
 margin: 0px;
}
pre {
 border: 1px solid #cacaca;
 line-height: 1.2em;
 font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
 padding: 10px;
 overflow:auto;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 background-color: #FAFAFB;
 color: #393939;
 margin: 0px;
}

The test html code is below:

<body>
<p>This is <code>code</code> style.</p>
<pre><code>Dude, here is code line.
The second line.
signing off.
</code></pre>
<ul>
<li><p>If you&rsquo;re using Git you might want to add the following
configuration setting to protect your project from Windows line
endings creeping in:</p>
<pre><code>```$ git config --global core.autocrlf true```
</code></pre></li>
</ul>
</body>

Any idea?

Firstly, thank all. sorry, I don't understand the two tags pre and code, as well don't understand how the two tags mapping to block-level code and inline code.

For block-level code, <pre> tag is used for it even though <code> is after <pre>, I must write pre { ... } alone.

For inline code, <code> tag is used for it, this tag parent might be <p>, <li>. so I could use the element>element selector in order to distinguish <pre><code>.

Apply them, it works now.

Thanks, Kuaf

Question 2

What exactly doesn’t work? The style sheet has some effects. What is wrong with them? The effects are not identifical with those of Git, since the style sheets are different. For example, you are setting color on code but the Git CSS file sets it on p code.

Question 3

I use Discount to convert markdown to HTML. Meanwhile, this tool could inline CSS style file to HTML. I like Github-style code block and code line and want to refine <pre><code> and <code> simply. I cannot add extra class property to these tags. With my css definition, browser don't identify <pre><code> and <code> well.

Question 4

I think there's a library called prism.js which uses this kind of format to format code

Question 5

If your problem is distinguishing between <pre><code> and <code>, as you say in a comment, then the solution is to use a CSS rule of the form

pre code { /* declarations here */ }

for those properties that should apply to code only when it is inside pre. There you can override any settings in a rule that has only code as the selector.

Question 6

Thank you, actually, I've tried pre code { ... } you mentioned above, it doesn't work, you can have a try. I tested in IE8 and Firefox, both failed, only code { ... } is used by browser.

Question 7

@kuaf if you post the code that you tried, maybe someone can isolate the problem.

Question 8

Try changing the code and pre to .code and .pre in the css, and then change the following:

<body>
<p>This is <code>code</code> style.</p>
<span class="pre"><span class="code">Dude, here is code line.
The second line.
signing off.
</span></span>
<ul>
<li><p>If you&rsquo;re using Git you might want to add the following
configuration setting to protect your project from Windows line
endings creeping in:</p>
<span class="pre"><span class="code">```$ git config --global core.autocrlf true```
</span></span></li>
</ul>
</body>

The span tage is very useful, as it does nothing by default. This means that by changing the class, you can format it any way you want using css

Question 9

I cannot change the HTML tag itself, because it's the output of Discount tool. What I can do is to define the CSS style file and inline to HTML.

Question 10

I attempt to find solution from CSS Selectors side. However, they don't help me out of this issue. I must make browser distinguish <pre><code> and <code>.

Question 11

I'm using the code and pre css definitions the OP provided, and the .code .pre syntax that annonymously suggested, and have to say it's working just fine. Have an upvote!

Jukka K. Korpela 203k38 gold badges281 silver badges407 bronze badges · Accepted Answer · 2012-01-28 14:55:50Z

3

If your problem is distinguishing between <pre><code> and <code>, as you say in a comment, then the solution is to use a CSS rule of the form

pre code { /* declarations here */ }

for those properties that should apply to code only when it is inside pre. There you can override any settings in a rule that has only code as the selector.

Share

Improve this answer

answered Jan 28, 2012 at 14:55

Jukka K. Korpela's user avatar

Jukka K. Korpela

203k38 gold badges281 silver badges407 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kuaf

kuaf Over a year ago

Thank you, actually, I've tried pre code { ... } you mentioned above, it doesn't work, you can have a try. I tested in IE8 and Firefox, both failed, only code { ... } is used by browser.

2012年01月28日T16:27:33.65Z+00:00

Jukka K. Korpela

Jukka K. Korpela Over a year ago

@kuaf if you post the code that you tried, maybe someone can isolate the problem.

2012年01月28日T16:40:36.527Z+00:00

CollectivesTM on Stack Overflow

CSS help: how to format code block and code line?

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related