<code> blocks

Get Started
1

Kinda hard to explain. Look at this snippet below


* { margin:0; padding:0; }

I want something like this, where it numbers the lines on the left hand side and has code indentation and everything in it…what are these called? Is it a script? Sorry for being vague. This above example isn’t perfect. If the above example had numbering on the left hand side (some websites have this feature also.

Any websites with examples of this are falling short on my mind.

2

This is normally done with JS. You could use sommat like this: http://alexgorbatchev.com/SyntaxHighlighter/ (It’s used on SitePoint posts and in a lot of other places.)

Edit: Just found some other links in my code links folder:

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

http://lea.verou.me/2012/07/introducing-prism-an-awesome-new-syntax-highlighter/

a nice set of guidelines
http://www.sitepoint.com/best-practice-for-code-examples/

3

+1 for figuring out what was being asked! I was completely lost

4

It took me a few minutes to even come up with that measly explanation as to what I want.

IIRC Sitepoint used to have a [css] tag which I THOUGHT had numbering but it doesn’t work anymore. Anyway, just need some admin control panel stuff put in so I can type my articles and I’ll be all set with my website! Thanks Ralph.

One thing I’m worried about is how this will look with JS off - would you recommend I have a default style of it set up and just let JS override everything? Working on another site project ATM so I haven’t delved into the SyntaxHighlighter.

5

Just testing a few pages on SitePoint where they use this, and with JS off, you just get normally formatted <pre><code> layout, which is just fine.

6

I opened up your sitepoint link and yes that works perfectly. Easy to implement as well.

7

Is there any way to simplify this? I have hte sitepoint example below:

<main>	
		<p id="example1-description">
			This is the descriptive text that comes before the code example, 
			talking about whatever the code is an example of:
		</p>


		<figure>
			<figcaption id="example1-caption">This is the caption</figcaption>
<pre 
	aria-describedby="example1-description" 
	aria-labelledby="example1-caption"><code 
	contenteditable="true" 
	tabindex="0" 
	spellcheck="false"><i>//try to get to sleep unless there's too much noise in the room</i>
<b>function</b> getToSleep()
{
	<b>while</b>(noise <= 10 &amp;&amp; sleep !== <u>"zzz"</u>)
	{
		sheep ++;
	}
	<b>if</b>(noise > 10)
	{
		<b>return</b> <b>false</b>;
	}
	<b>return</b> <b>true</b>;
}</code></pre>
		</figure>


	</main>

Typing that into my database would be difficult (my form will be submitting directly to the database). Is there any way to convert this into <code> or some similar format? Less structure to it?