Inlägget finns även tillgängligt på: Engelska
Om vi vill presentera kod på internet så finns här en del olika verktyg som hjälper till att färgmarkerar denna efter syntaxa. Alternativen vi kan vända oss till är antingen server eller klient -baserade. Jag har valt att använda ett klientbaserat script eftersom jag inte vill ”smutsa” ner html koden.
Prettify är ett javascript som är släppt under licensen Apache License 2.0. Koden finns att ladda ner på Google code. Jag har valt att använda detta script framför andra motsvarigheter eftersom jag upplever det som mer flexibelt, stabilare och snabbare.
Användande
Ladda hem och länka CSS samt javascript -filerna i ditt html dokument.
<link type="text/css" rel="stylesheet" href="prettify.css" /> <script type="text/javascript" src="prettify.js"></script>
Initiera scriptet genom att köra funktionen prettyPrint. Funktionen kommer leta efter alla pre taggar märkta med klassen ”prettyprint” och styla dessa. Har du som jag redan en sida med mycket kod på så kan det bli lite mycket att märka om. Min lösningen var att jag helt enkelt letade efter alla taggar i dokumentet som jag ville redigera med hjälp av javascript och la till taggen ”prettyprint” på dessa.
Ett exempel på hur detta skulle kunna se ut i jQuery:
$( 'pre' ).addClass( 'prettyprint' );
För att få raderna numrerade behöver du även lägga på klassen ”linenums”.
Vill man inte att koden ska börja räknas från början utan exempelvis från rad nummer 27 så kan man lägga till klassen ovan nämnt följt av ett kolon och siffran på raden man vill börja räkna från.
<pre class="prettyprint linenums:27">
...
</pre>
Ange språk
Utöver de vanliga språken som stöds av Prettify så finns det även separata språkfiler man kan komplettera med. Prettify klarar dock av rätt så många språk utan sådan komplettering, för exakt specifikation över vilka som stöds så gör du bäst i att besöka Google code sidan.
Prettify kan automatiskt känna av vilken sorts syntaxa som ryms inom pre -taggarna och färga därefter. Vill man så har man däremot också själv möjligheten att specificera vilket språk det är.
Första alternativet för att göra så är att lägga till ytterligare en klass på pre -elementet.
<pre class="prettyprint lang-css">
...
</pre>
Det andra alternativet är att man lägger till en code -tag som specifiserar språket på ett liknande vis.
<pre class="prettyprint">
<code class="language-css">
...
</code>
</pre>
Det sistnämnda alternativet är inspirerat av W3C och är också det alternativet jag själv valt att använda mig av.
Tips
Kan rekommendera att även märka upp koden med CSS -klasser som talar för hur många rader pre -taggen har. Detta kan komma till användning när du stylar hur prettify stycket ska visas i din CSS -mall.
$( 'pre' )
.addClass( 'prettyprint' )
.each(
function()
{
// Counting line breaks
var ln = $( this ).html().split( "\n" ).length;
if( ln > 1 )
$( this ).addClass( 'linenums' );
if( ln > 999 )
$( this ).addClass( 'four' );
else if( ln > 99 )
$( this ).addClass( 'three' );
else if( ln > 9 )
$( this ).addClass( 'two' );
});
prettyPrint();