Si necesitas compartir código en tus posts, y quieres mostrarlo de forma que se diferencie del resto del contenido, a través de Prettifier podrás hacerlo de una forma muy simple.
Lo primero será añadir el script en todas tus páginas donde desees emplearlo o editando la platilla de tu tema.
Añádelo entre las etiquetas <head> </head>:
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>
Además, podrás elegir entre las siguientes plantillas:
Default
<!doctype html> <html> <head> <title>HTML Test</title> <script type="text/javascript"> // Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style type="text/css"> p { color: pink } b { color: blue } u { color: "umber" } </style> </head> <body> <h1>Hello world!</h1> </body> </html>
Desert
<!doctype html> <html> <head> <title>HTML Test</title> <script type="text/javascript"> // Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style type="text/css"> p { color: pink } b { color: blue } u { color: "umber" } </style> </head> <body> <h1>Hello world!</h1> </body> </html>
Sunburst
<!doctype html> <html> <head> <title>HTML Test</title> <script type="text/javascript"> // Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style type="text/css"> p { color: pink } b { color: blue } u { color: "umber" } </style> </head> <body> <h1>Hello world!</h1> </body> </html>
Sons-Of-Obsidian
<!doctype html> <html> <head> <title>HTML Test</title> <script type="text/javascript"> // Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style type="text/css"> p { color: pink } b { color: blue } u { color: "umber" } </style> </head> <body> <h1>Hello world!</h1> </body> </html>
Doxy
<!doctype html> <html> <head> <title>HTML Test</title> <script type="text/javascript"> // Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style type="text/css"> p { color: pink } b { color: blue } u { color: "umber" } </style> </head> <body> <h1>Hello world!</h1> </body> </html>
Pincha en el nombre del tema que te guste en Gallery of themes for code prettify, copia los estilos CSS y añádelos a tu hoja de estilos.
Ahora cuando quieras mostrar código en uno de tus post, tan solo tendrás que envolverlo entre las etiquetas <pre class="prettyprint"> Tu código aquí </pre>
Tu código aquí
0 Comentarios