Prism.js – Syntax Highlighter de código liviano para frontend
Prism.js se trata de un resaltador de código o más conocido por su nombre en inglés syntax highlighter. Tiene la característica de ser muy ligero y sin dependencia adicionales. Soporta los lenguajes más comunes y temos paquetes para NPM y Bower.
Tiene soporte pata plugins como añadir el número de líneas o resaltar parte del código. La filosofía del proyecto es que sea lo más liviano posible por eso podemo elegir que extras queremos o no añadir así como los lenguajes que vamos a utiliza.
El uso es básico solo debemos añadir un archivo CSS y otro Javascript.
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>Paras usarlo hace uso de las etiquetas pre y code, en la etiqueta code debemos añadir el lenguaje a usar haciendo uso de la clase language-nombreDelLenguage.
Por ejemplo para añadir Javascript debemos usar:
<pre><code class="language javascript">
...
</code></pre>Tema One Dark por AGM Studio
Aunque Prism.js trae varios temas por defecto yo soy un enamorado del resaltado de sintaxis de Atom llamado One Dark así que he creado el tema one dark para Prism.js.
Puedes instalarlo usando NPM y Bower con:
NPM
npm install -S prism-theme-one-darkBower
bower install -S prism-theme-one-darkPara usarlo solo debemos sustituir el tema CSS por el nuestro.
<!DOCTYPE html>
<html>
<head>
...
<link href="prism-onedark.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>Tema One Dark por AGM Studio
Aunque Prism.js trae varios temas por defecto yo soy un enamorado del resaltado de sintaxis de Atom llamado One Dark así que he creado el tema one dark para Prism.js. Es compatible con el plugins numerar líneas.
Puedes instalarlo usando NPM y Bower con:
NPM
npm install -S prism-theme-one-darkBower
bower install -S prism-theme-one-darkPara usarlo solo debemos sustituir el tema CSS por el nuestro.
<!DOCTYPE html>
<html>
<head>
...
<link href="prism-onedark.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>Muestras del tema One Dark
Aquí una muestra de como se ve el tema.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hola Mundo</title>
</head>
<body>
<h1>Homa Mundo</h1>
<div class="container">
<p>...</p>
</div>
</body>
</html>
CSS / SASS / LESS
html {
background-color: darken($color-dark, 10);
}
body {
color: #666;
background-color: $color-light;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 1.8em;
&.navbar-fixed-mode {
margin-top: 90px;
}
}
.header-page {
margin-bottom: 40px;
padding: 28px 0 22px 0;
border-bottom: solid 1px $color-border;
background-color: $color-light-alt;
}Javascript
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('html', function() {
gulp.src('src/html/**/*.html')
.pipe(gulp.dest('dist'));
});
gulp.task('js', ['html'] ,function() {
gulp.src('src/js/**/*.js')
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('default', ['js']);
Prism | http://prismjs.com/
Theme One Dark | https://github.com/AGMStudio/prism-theme-one-dark
