|
|
Cosas de Windows -- Tutorial sobre cosas de Windows -- ____________________________ 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:
</code></pre> - Si el código tiene el caracter >, debemos cambiarlo por su código htm. _________________________________ - 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| 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);
}
_________________________________
__________________________________
|
| - Mi correo: juana1991@yahoo.com |
- KIO4.COM | - Política de cookies. | Textos e imágenes propiedad del autor: © Juan A. Villalpando No se permite la copia de información ni imágenes. |