Syntaxmarkering i blogginlägg med Javascript

Har precis fixat så att kodexempel i denna blogg får syntaxen framhävd med färger så den förhoppningsvis ska bli mer lättläst. Det engelska uttrycket är ju "syntax higlighting" men jag hade lite svårt att hitta en svensk motsvarighet först. Kristoffer på Bloggy hjälpte mig och tipsade om "syntaxmarkering", som fick blir titel på detta inlägg.

När jag sökte efter en metod att få till detta hittade jag några olika alternativ, i en tråd på Stack Overflow går man igenom några av dem.

Vissa tycker att det är en bra ide att märka upp koden med html och css i förhand, och spara den färdigformatterad i databasen. Detta kan man bland annat göra med ett plugin till Visual Studio som heter CopySourceASHtml. Jag dock att jag inte ville ha in detta i databasen utan att koden skulel sparas helt utan extra HTML och CSS. För om man vill ändra på det i efterhand så är det ju omständigt att behöva ändra alla gamla exempel.

Istället beslutade jag mig för att använda Javascript och att formatteringen ska ske i besökarens webbläsare. Uppritningen blir ju något långsammare, men de andra fördelarena var tillräckligt stora för att jag skulle gå på detta spåret.

Ett sådant javascript är google-code-prettify men eftersom det inte verkar ha stöd för C# så var det inget alternativ för denna blogg som har större delen av kodexemplen på det programmeringsspråket.

Istället valde jag samma som Scott Hanselman och bloggplattformen Wordpress använder sig av. Det heter SyntaxHighlighter och är utvecklat av Alex Gorbatchev.

Ett litet problem är dock att koden ska märkas upp på följande sätt och name inte är godkänt attribut på <pre>-taggen enligt XHTML-standarderna.

<pre name="code" class="javascript">
// the code
</pre>

Lars Corneliussen har dock fixat ett jQuery-plugin beautyOfCode som ändrar beteendet i SyntaxHighlighter så man istället kan använda följande struktur:

<pre class="code">
<code class="javascript">
// the code
</code>
</pre>

Det senare alternativet är alltså godkänd XHTML och det är detta som jag använder här. Läs gärna om hur jag fixade så att TinyMCE-editorn kan skapa denna kod med hjälp av ett plugin.

Än så länge har jag bara gjort om kodexemplena på förstasidan i bloggen till att använda syntaxmarkeringen. Ska fundera lite på hur jag ska ändra alla gamla exempel som fortfarande bara visas med en grå ruta.

Comments

Of publicity, personality in sharp fashion label has always been mixed tide, this fall, how can reduce the hot temperature of the mash? Holes jeans heavy attack is when the sculptures of all kinds of holes, breaking traditional rules of dress, claimed the human eyeball, an affidavit remix!

Great post. Thanks for posting these interesting java script updates.

Now a day’s java script is necessary for every web designer and developer.

http://www.janbaskdigitaldesign.com

I wish to get some more updates form you soon.thanks. http://www.onlinepromotionuae.ae

I wish to get some more updates form you soon.I just followed the instruction and it works completely. Thanks to you so much............ www.andamandiscover.com"> www.andamandiscover.comlink text

thanks for shearing a important article........... http://onlinepromotionhouse.com"> http://onlinepromotionhouse.comlink text

Superbly written article. Problems arises due to driver error and can be sorted out easily just by calling us @ +44-800-098-8371 HP Helpline Number UK.

Thanks for this awesome web page, i like it Dell printer helpline

way to describe the topic is great. Thanks for sharing. Hp Support

Content is very useful and topic is also very good. I like it.

Very Very nice post. its a very useful and outstanding article. Thanks for that.

way to describe the topic is great. Thanks for sharing

very interesting updates.

Great post to go through and there are lots of things to learn from it. If you are willing to know more about AVG then, you can contact at 0800-756-3354 Online help AVG UK.

Please fill out all the fields.

*
*