javascript - highlighter - ¿Cómo usar Embellecer con blogger/blogspot?
javascript organizer (10)
Estoy usando blogger.com para alojar algunos textos sobre programación, y me gustaría usar prettify (igual que stackoverflow) para colorear muy bien los ejemplos del código.
¿Cómo instalo los scripts de preetiquetado en el dominio del blog?
¿Sería mejor (si es posible) vincular a una copia compartida en alguna parte?
Tengo espacio web en un dominio diferente. ¿Eso ayudaría?
Muchas gracias.
Cuando realiza una nueva entrada en blogger, tiene la opción de usar HTML en su entrada y editar las entradas de su blog.
entonces escribe http://blogger.com , luego inicia sesión, luego Publicando> Editar Publicaciones> Editar y luego ponlo en la parte superior:
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ''function'') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}
</style>
Tenga en cuenta que no debe usar prettyPrint directamente como controlador de eventos, sino que lo confunde (consulte el archivo Léame para obtener más información). Por eso estamos pasando a addLoadEvent una función que luego da vuelta y llama a prettyPrint .
En este caso, porque blogger no nos permite vincular a la hoja de estilo, simplemente incorporamos los contenidos de prettify.css.
a continuación, agregue una etiqueta <code></code> o una etiqueta <pre></pre> con el nombre de clase de "prettyprint" , incluso puede especificar el idioma como este "prettyprint lang-html"
para que se vea así
<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>
o así
<code class="prettyprint lang-html">
<!-- your code here-->
</code>
el código que usted ingresa necesita tener su HTML limpiado de <y> para hacer esto simplemente pegue su código aquí: http://www.simplebits.com/cgi-bin/simplecode.pl
puede poner el código superior en su diseño HTML para que esté incluido en todas las páginas de manera predeterminada si lo desea.
actualización Ahora puede vincular archivos CSS en blogger, por lo que agregar esto al <head> debería ser suficiente
<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
document.addEventListener(''DOMContentLoaded'',function() {
prettyPrint();
});
</script>
Elegí no reemplazar el evento de carga corporal a propósito, en su lugar estoy usando el nuevo evento DOMContentLoaded que los navegadores antiguos no admiten, si necesita soporte de navegador anterior, puede usar cualquier otro evento de carga para iniciar prettyPrint, por ejemplo jQuery:
jQuery(function($){
prettyPrint();
});
o el domready supuestamente más pequeño
y tu hecho :)
Editar:
como Lim H señaló en los comentarios, en caso de que utilice las vistas dinámicas de blogger (plantillas de ajax), entonces necesita usar el método descrito aquí para enlazar javascript personalizado: prettyPrint () no se invoca en la carga de la página
Actualización 2017-06-04
Usa la guía aquí https://github.com/google/code-prettify
Básicamente solo usa esto :)
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>
Eche un vistazo a SyntaxHightlighter en http://alexgorbatchev.com/wiki/SyntaxHighlighter En ese sitio también puede encontrar instrucciones sobre cómo usarlo en blogger.com y el sitio ofrece una versión alojada de los scripts necesarios para que no lo haga. Necesita alojar archivos en alguna parte usted mismo.
Es muy simple agregar el código de Google prettifier en tu blogger.
solo incluya la biblioteca de javascript que se muestra a continuación en su blogger justo antes de la etiqueta.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
al igual que en la imagen de abajo ...
Ahora ha agregado Google prettifier con éxito en su blogger.
Ahora, si desea insertar un código en su publicación de blogger, agregue el código (html, css, php y etc.), luego inserte ese código entre .... etiquetas.
<pre class="prettyprint">...</pre>
o
<code class="prettyprint">...</code>
Demostración de Google Prettify en Blogger
También consulte esta documentación para agregar este prettifier de Google a blogger en el siguiente enlace.
cómo agregar el resaltador de sintaxis para Blogger usando Google Prettify
Hoy en día, Google-Code-Prettify tiene una secuencia de comandos Auto-Loader. Puede cargar JavaScript y CSS para embellecer a través de una URL.
Agregue el script a la sección <head> de su plantilla de Blogger y funcionará en todas sus publicaciones:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
Más detalles aquí: http://code.google.com/p/google-code-prettify/wiki/GettingStarted
Lo siguiente funcionó para mí de inmediato.
- Vaya a Blogger> Diseño> Editar HTML
- Copie el siguiente fragmento y péguelo inmediatamente después de
<head>en el campo "Editar plantilla":
retazo:
<link href=''http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css'' rel=''stylesheet'' type=''text/css''/>
<script src=''http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'' type=''text/javascript''></script>
- Después de
</head>reemplazar<body>con<body onload=''prettyPrint()''> - Haga clic en "GUARDAR PLANTILLA"
- Vaya a Blogger> Publicación> Nueva publicación
- Asegúrese de editar el código HTML haciendo clic en "Editar HTML". En el campo vacío, prueba:
<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>
- Observe si hace clic en "Vista previa" ahora verá este código en negro solamente. No te preocupes (todavía).
- Haga clic en "PUBLICAR PUBLICACIÓN" y luego "VER BLOG". Tu código debe ser embellecido.
No es una respuesta directa a su pregunta, pero vale la pena considerar GitHub . Puede obtener una cuenta gratuita y obtener "gists" coloreados de sintaxis que puede compartir y alojar en su página web.
La desventaja es que la copia está alojada en el sitio de Github y, si no funciona, no está disponible para ti.
Otra solución es usar la biblioteca de scripts java http://alexgorbatchev.com/wiki/SyntaxHighlighter 2.0. Lo he usado en mi blog y parece funcionar bastante bien.
Aquí hay una publicación al respecto:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html
Aclamaciones.
Ve a la sección del tema de blogger y haz clic en editar HTML. Luego agrega Google Prettify CDN a la etiqueta principal del HTML.
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js''/>
Luego, incluya un tema para el fragmento de código debajo de este script. Incluí el tema Desert.
<!--Desert theme-->
<style type=''text/css''>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>
Para más temas, visite aquí .. Pretifique los temas
Cuando crea una publicación, cambie el modo de edición de visual a HTML y vaya al lugar donde va a agregar el fragmento de código. Luego incluye el código de esta manera.
<pre class="prettyprint">
<code class="language-html">
<!-- your code snippet -->
</code>
</pre>
Puede cambiar el estilo del código seleccionando los idiomas relevantes html, css, php, javascript ... Aquí usé un fragmento de código html .
cdnjs que proporciona la biblioteca " SyntaxHighlighter "
Llegué a blogger >> plantilla >> Editar plantilla Agregar código debajo justo antes de finalizar la etiqueta del cuerpo y guardar la plantilla.
He dado el ejemplo para Python.
puede vincular los otros archivos de script de idioma desde cdnjs. código de resaltado de sintaxis
<pre class="brush: py">
print("hello world")
</pre>
para otros idiomas vaya y copie el script: https://cdnjs.com/libraries/SyntaxHighlighter
<!-- syntax highlighter-->
<link href=''https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css'' rel=''stylesheet''/>
<script src=''https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js''/>
<script src=''https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js''/>
<!-- for python -->
<script src=''https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js''/>
<!-- include other languages like javascript, php -->
<script language=''javascript''>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Here está la solución que funciona para mí. Coloque el <head>...</head> del HTML dinámico del blogger:
<script>
$(window.blogger.ui()).on(''viewitem'', function (event, post, element) {
prettyPrint();
});
</script>