Syntax highlighter

Jak na stránkách jednoduše zobrazovat zdrojové kódy s pěkně zvýrazněnou syntaxí. 

21. 9. 2015

Na zvýrazňování syntaxe je toho mraky. Na mě na první pohled dobře zapůsobilo prismjs.com , vyzkoušel jsem a dělá to přesně to co jsem chtěl s prakticky nulovou námahou.

Jenom si na jejich webu naklikáte, pro jaké jazyky to chcete, jaký styl, případně doplňky, stáhnete si dva vygenerované soubory prism.css a prism.js, které vložíte na stránky:
<!DOCTYPE html>
<html>
<head>
    ...
    <link href="prism.css" rel="stylesheet">
</head>
<body>
    ...
    <script src="prism.js"></script>
</body>
</html>

a je to.

Když pak chcete něco highlightovat nastavíte tomu třídu s daným jazykem ve tavru language-xxxx např:

<pre><code class="language-css">p { color: red }</code></pre>

Asi nemá cenu to víc rozvádět, základní použití je triviální, přičemž možností poštelování dle vlastních potřeb je dost a všechny informace jsou prehledně na webu prismjs.com.

language-xxxx

markup
css
clike
javascript
actionscript
aspnet
bash
c
csharp
cpp
ini
java
less
matlab
pascal
php
php-extras
powershell
python
sql
vhdl

http://prismjs.com/