Cosas de Windows
Juan Antonio Villalpando
-- Tutorial sobre cosas de Windows --
Volver al índice del tutorial
____________________________
5.- Poner colores a los códigos de programa en una página web. HighLight y Prism.
- Tenemos una página web donde hay código de un programa PHP, Visual Basic, AutoIt,... y queremos que esos códigos salgan con colores.
- Hay dos aplicaciones gratuitas muy conocidad HighLightjs y Prism.
- Elijo Prism, aunque HighLightjs es igualmente válida.
------------------------------------------------
- Entro en la página de Prism. Marco el lenguaje o los lenguajes que va a tener mi página (además es coveniente Markup, Css, JavaScript).
- http://prismjs.com/download.html
- Al final de la página bajo prism.js y prism.css
- Esos dos pequeños archivos debemos subirlo al hosting, en la carpeta donde esté las páginas que queremos ponerlas con letras de color.
- Además debemos insertarle al código HTML de esas páginas las siguientes líneas:
<!DOCTYPE html>
<html>
<head>
...
<link href="prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
- En la parte que está el código debemos poner:
<pre><code class="language-autoit">
.......................................................
</code></pre>
- Si el código tiene el caracter >, debemos cambiarlo por su código htm.
_________________________________
- Cambio de colores.
- Editamos el archivo prism.js, es complicado ya que se basa en expresiones regulares.
Prism.languages.autoit={
comment:[/;.*/,{pattern:/(^\s*)#(?:comments-start|cs)[\s\S]*?^\s*#(?:comments-end|ce)/m,lookbehind:!0}],
url:{pattern:/(^\s*#include\s+)(?:<[^\r\n>]+>|"[^\r\n"]+")/m,lookbehind:!0},
string:{pattern:/(["'])(?:\1\1|(?!\1)[^\r\n])*\1/,greedy:!0,inside:{variable:/([%$@])\w+\1/}},
directive:{pattern:/(^\s*)!\w+/m,lookbehind:!0,alias:"keyword"},
"function":/\b\w+(?=\()/,
variable:/[$]\w+/,
macro:/[@]\w+/,
incluye:/[#]\w+/,
keyword:/\b(?:Case|Const|Continue(?:Case|Loop)|Default|Dim|Do|Else(?:If)?|End(?:Func|If|Select|Switch|With)|Enum|Exit(?:Loop)?|For|Func|Global|If|In|Local|Next|Null|
ReDim|Select|Static|Step|Switch|Then|To|Until|Volatile|WEnd|While|With)\b/i,
number:/\b(?:0x[\da-f]+|\d+(?:\.\d+)?(?:e[+-]?\d+)?)\b/i,"boolean":/\b(?:True|False)\b/i,
operator:/<[=>]?|[-()\[\]+*\/=&>]=?|[?^]|\b(?:And|Or|Not)\b/i,
punctuation:/[.,:]/};
- Observamos la manera en que está indicado cada tipo de operador.
- Editamos el archivo prism.css, observamos el color asignado a cada uno de esos operadores:
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #0000ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #ff0000;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style.token.string {
color: #FF3300;
background: hsla(0, 0%, 100%, .5);
}
_________________________________ - Modificaciones para AutoIt. SciTE.
- Estas son las modificaciones que he realizado para los código de autoit:
prism.js
prism.css
__________________________________
|