¿Cómo utilizar prettify con blogger/blogspot?

https://stackoverflow.com/questions/1852537

13-09-2019
|

Pregunta

Estoy usando blogger.com para alojar algunos textos sobre programación y me gustaría usar prettify (igual que stackoverflow) para colorear agradablemente los ejemplos de código.

¿Cómo instalo los scripts prettify en el dominio del blog?
¿Sería mejor (si es posible) vincular a una copia compartida en algún lugar?
Tengo un espacio web en un dominio diferente.¿Eso ayudaría?

Muchas gracias.

Solución

Cuando se hace una nueva entrada en blogger, se tiene la opción de usar HTML en su entrada y editar las entradas de blog.

so escriba http://blogger.com , a continuación, iniciar sesión, a continuación, Contabilización> Editar Mensajes> Editar entonces ahí poner esto 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 utilizar prettyPrint directamente como un controlador de eventos, se confunde (ver la readme para más detalles). Es por ello que estamos pasando addLoadEvent una función que se da la vuelta y llama prettyPrint.

En este caso, ya que blogger no nos permiten vincular a la hoja de estilo, simplemente incrustar el contenido prettify.css.

a continuación, añadir una etiqueta o una etiqueta <code></code> <pre></pre> con el nombre de la clase de "prettyprint", incluso se puede especificar el idioma como esto "prettyprint lang-html"

por lo que puede tener este aspecto

<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>

o como esto

<code class="prettyprint lang-html">
<!-- your code here-->
</code>

el código que se pone en las necesidades que tiene su HTML limpia de para ello basta con pegar el código aquí: http: // www. simplebits.com/cgi-bin/simplecode.pl

se puede poner el código superior en su diseño HTML de manera que su incluida para todas las páginas por defecto si lo desea.

actualización Ahora se puede enlazar archivos CSS en Blogger, por lo que añadir esto a la <head> debe ser lo suficientemente

<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>

No elegí para reemplazar el proceso de carga del cuerpo a propósito, en vez estoy usando el nuevo evento DOMContentLoaded que los navegadores antiguos no son compatibles, si necesita el apoyo del navegador de edad, se puede utilizar cualquier otro evento de carga para iniciar prettyprint , por ejemplo jQuery:

jQuery(function($){
    prettyPrint();
});

domready más pequeño jamás

y listo:)

Editar

Lim H señaló en los comentarios, en el caso en el que utiliza las vistas dinámicas de Blogger (plantillas ajax ), entonces es necesario utilizar el método descrito aquí para unirse a medida javascript: prettyprint () no recibe llamada en la página de carga

Actualización 2017-06-04

Utilice la guía aquí https://github.com/google/code-prettify

Básicamente, sólo use este:)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>

Otros consejos

Los siguientes trabajó para mí inmediatamente.

Ir a Blogger> Diseño> Edición de HTML
Copia el siguiente fragmento de código y pegarlo inmediatamente después <head> en el campo "Editar plantilla":

fragmento:

<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 reemplazar </head> <body> con <body onload='prettyPrint()'>
Haga clic en "GUARDAR PLANTILLA"
Ir a Blogger> Publicar> Nuevo Post
Asegúrese de que está editando el código HTML haciendo clic en "Editar HTML". En el intento campo vacío:

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

Aviso si hace clic en "Vista previa" Ahora vamos a ver este código en negro solamente. No se preocupe (todavía).
Haga clic en "publicar entrada" y luego "Ver blog". El código debe ser prettified.

Hoy en día, Google-Code-Prettify tiene un script de auto-cargador. Puede cargar el código JavaScript y CSS para embellecer a través de una URL.

Añadir la secuencia de comandos a la sección <head> de su plantilla de Blogger y que funcionará en todos sus mensajes:

<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

Es muy simple agregar código Google prettifier en su blogger.

basta con incluir el siguiente librería javascript 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 foto de abajo ...

introducir descripción de la imagen aquí

Ahora que ha añadido correctamente el código Google prettifier en su blogger.

Ahora bien, si desea insertar código en tu post blogger luego agregar el código (HTML, CSS, PHP, etc), a continuación, insertar el código entre las etiquetas .....

 <pre class="prettyprint">...</pre>

<code class="prettyprint">...</code>

demostración de la Prettify Google en Blogger

También consulte esta documentación para añadir esta prettifier Google blogger en el siguiente enlace.

cómo agregar sintaxis de resaltado Para Blogger Uso de Google prettify

Tener un vistazo a SyntaxHightlighter en http://alexgorbatchev.com/wiki/SyntaxHighlighter En ese sitio también se pueden encontrar instrucciones sobre cómo usarlo en blogger.com y el sitio ofrece una versión hospedada de los scripts necesarios para que no se necesita para alojar archivos en algún lugar usted mismo.

Otra solución es utilizar la SyntaxHighlighter biblioteca de scripts 2,0 java. Lo he utilizado en mi blog y parece que funciona bastante bien.

Aquí hay un post al respecto:

http://www.craftyfella.com /2010/01/syntax-highlighting-with-blogger-engine.html enlace de texto

Saludos.

No es una respuesta directa a su pregunta, pero vale la pena considerar GitHub . Usted puede obtener una cuenta gratuita y obtener la sintaxis de color "GIST", que se puede compartir y anfitrión en tu página web .

La desventaja es que la copia se encuentra alojado en el sitio de Github y si eso es hacia abajo, entonces hay que bajar para usted también.

cdnjs proporcionando la biblioteca "Resaltador de sintaxis"

tengo que blogger >> plantilla >> editar plantilla agregue el siguiente código justo antes del final del cuerpo etiquetar y guardar la plantilla.
He dado un ejemplo para Python.
puede vincular los archivos de script de otros idiomas 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>

Aquí es la solución que funcione para yo. Poner en el <head>...</head> de HTML dinámico blogger:

<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    prettyPrint();
});
</script>

Ir a la sección de blogger tema y haga clic en Editar HTML .. A continuación, añadir el Google Prettify CDN a la etiqueta de la cabeza del HTML.

https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

A continuación, incluir un tema para este fragmento de código script..I incluido el tema del desierto.

<!--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í .. temas Prettify

Cuando se crea una entrada, cambiar el modo de edición desde visual a HTML e ir al lugar donde se va a añadir el fragmento de código. A continuación, incluir el código como este.

<pre class="prettyprint">
  <code class="language-html">
      <!-- your code snippet -->
  </code>
</pre>

Puede cambiar el estilo de código mediante la selección de idiomas pertinentes html, css, php, javascript ... Aquí he utilizado un HTML fragmento de código.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow