Page 64 - Locaweb - Edição 36
Basic HTML Version
lw
programação
64
locaweb
Prism.js
rel="stylesheet"/>
<script src="js/prism.js"></script>
</head>
<body>
<div class=" class="language-markup
language-css language-javascript">
Exemplo de trecho de código
formatado com o Prism.js:
<pre>
<code>
<script>
alert('Demonstração do Prism.js');
</script>
<style>
body {
font: sans-serif;
color:#321AAA;
}
</style>
<div class="setor">
<ul>
<li>Item formatado</li>
<li>Segundo Item</li>
<li>Último Item</li>
</ul>
</div>
</code>
</pre>
Também é possível
colocar o código a ser formatado
na mesma linha que o texto, como
<code><html lang="pt-br"></code>
neste trecho.
</div>
</body>
</html>
O código acima pode apresentar
várias saídas em tela (como mostra a
imagem no topo da página), montada
com o Prism.js sem plugin e nas
seguintes configurações: versão
minified, tema Funky, linguagens:
markup (HTML), CSS e JavaScript.
Já o mesmo código que usa o
tema Dark, o plugin “Show Invisibles”
(será abordado a seguir) e somente
o destaque para markup, fica com a
aparência da imagem no rodapé
desta página.
Note que, como se montou o
pacote apenas com a estilização para
HTML, os trechos em JavaScript e
CSS são tratados como texto normal. O
mecanismo de detecção do que deve
ser formatado para uma determinada
linguagem se dá por meio de
expressões regulares. Caso queira criar
uma extensão do Prism.js para uma
linguagem ainda não suportada, basta
ir fundo em regexp, estudar o código-
fonte do projeto e elaborar seu plugin.
O Prism.js foi arquitetado de
maneira a aceitar plugins, possuindo
alguns oficiais – porém não
disponibilizados nativamente junto
do framework, para não afetar no
tamanho final do script. Dessa forma,
quando necessário, basta acessar o
site do projeto e realizar o download
dos plugins. Serão demonstrados aqui
os mais famosos.
Realce de
linhas específicas
(
prismjs.com/plugins/
line-highlight
):
Quando se monta um pacote com
estilização para HTML, itens em JS e
CSS são tratados como texto normal
Código ao lado
apresenta várias
saídas em tela;
exemplo mostra
Prism sem qualquer
plugin adicionado
