Page 63 - Locaweb - Edição 36
Basic HTML Version
lw
programação
O Prism.js atua de maneira a
colorir e destacar blocos de código de
linguagens, bastando que, ao baixar
o framework, selecione o suporte a
quais linguagens irá estender. Mesmo
após o download, é possível definir o
suporte de novas linguagens, bastando
que se possua certa intimidade com a
utilização de regular expressions.
Os realces em códigos são
realizados não só em blocos de código
(como blocos de CSS ou JavaScript,
em um exemplo de código HTML),
como também em códigos inline
(como em um exemplo no qual ações
JavaScript ou estilizações CSS estejam
dentro de tags HTML).
Atualmente, o Prism.js funciona
corretamente no Internet Explorer
(a partir do 9), Firefox, Chrome,
Opera – contudo, ainda apresenta
incompatibilidades dependendo do
tema que estiver utilizando em seu
navegador favorito. A maioria dos
browsers de dispositivos móveis
(como o Opera Mini) também não se
dá muito bem com a solução.
Inicialmente, para atuar com o
Prism.js, é necessário baixá-lo em sua
página de download. Quando acessar
esta página, você notará que existem
várias opções disponíveis. Isso permite
que você adapte o arquivo que será
montado para ser baixado de acordo
com seu desejo e real necessidade.
Caso você queira produzir em
cima do código do Prism.js, poderá
realizar o download da versão de
desenvolvimento (Development
Version). Para quando desejar aplicar
os recursos deste framework em seu
projeto, utilize a versão “Minified”
(que tem seu núcleo com quase
metade do peso da versão
para desenvolvimento).
A partir daí, escolha qual tema
irá utilizar – o site disponibiliza três
modelos “oficiais”: default, dark e
funny – e quais linguagens poderão
ser afetadas (HTML, CSS, JavaScript
e Java). Você também poderá
baixar alguns plugins (serão citados
adiante). Todos esses componentes
adicionais possuem a informação
do tamanho que ocupam, para que
você possa verificar o quanto a
utilização dos recursos poderá retardar
o carregamento da página que o
contiver. Lembrando que o download
do JavaScript e do CSS da ferramenta
é feito separadamente.
O Prism.js na prática
O primeiro passo é adicionar os
documentos necessários à página
que receberá a formatação. Realize
o download do Prism.js com os
componentes que desejar e os
referencie com suas respectivas tags
abaixo da <head>. Outro detalhe
importante é que a tag <pre> que
receberá o código deverá estar contida
em um contêiner (div, section, por
exemplo) estilizado com a(s) classe(s)
referente(s) à(s) linguagem(ns) que se
deseja formatar: language-markup,
para formatar o HTML; language-css,
para formatar os trechos de CSS; e
language-javascript, para formatar os
blocos de JavaScript.
Para melhor ilustrar, será
demonstrado como o código abaixo se
comporta com as várias possibilidades
que este framework permite:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demonstrando o Prism.js</title>
<link href="css/prism.css" rel="stylesheet"/>
<link href="css/estilo.css"
Atualmente, o Prism.js funciona corretamente no Internet Explorer (a partir do
9), Firefox, Chrome, Opera; em navegadores de portáteis, ele derrapa um pouco
Escolha qual
tema irá
utilizar. O site
disponibiliza
três modelos
oficiais: default,
dark e funny
locaweb
63
