Het enige wat je daarvoor hoeft te doen is (het pad naar) wat javascript in te voegen op je website. Dat kun je op de pagina doen, maar als je de routine vaker gebruikt is het slimmer om het in je <header> mee te geven. Dit is wat er moet staan:
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>De code die je wilt weergeven zet je dan tussen <pre class="prettyprint"> ... </pre> tags. Het werkt met heel veel verschillende programmeertalen, dus niet alleen met HTML.
Hieronder zie je een uitgebreider voorbeeld met de default skin.
<html>
<head>
<title>google-code-prettify</title>
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>
</head>
<body>
<p>Een voorbeeld:</p>
<pre class="prettyprint">
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</pre>
</body>
</html>
Voorbeelden met andere skins vind je hier.Als je wilt kun je ook nog de regelnummers laten zien. Het mooie daarbij is dat de nummers niet worden meegenomen als je de tekst selecteert en kopieert.
<pre class="prettyprint linenums">
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
Geen opmerkingen:
Een reactie posten