|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 WAMP - PHP - MySQL
  Estación meteorológica Cosas de Windows Webs interesantes Arduino
   AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

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

__________________________________

- 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.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información