harto ocio y otras cosas

Algunas pocas cosas

Nibbleblog plugin google-code-prettify

10 junio, 2015 | Código

here we have a new plugin that let you improve the visualization of code using google-code-prettify. This post based on 4 links you can access at the end of this page.


Using (1) i created a plugin called google_code_prettify where i use the library of reference (2), but there is a little problem, prettify needs a class called prettyprint on html tag <pre>. Then i created a script vre simple that do that. With reference (4) i am sure that my code executed when webpage loaded.

code in plugin.bit

$url_prettify = '<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>';

$code_prettify = '<script type="text/javascript">
function(event) {
var pres = document.getElementsByTagName("pre");
for (var i=0;i<pres.length;i++) {
pres[i].className = pres[i].className + " prettyprint";

return $code_prettify.$url_prettify;

this add the js file and script inside the header tag.

You can see the complete code here https://github.com/felipinbombin/nibbleblog/tree/master/plugins/google_code_prettify


this solutions itsn't really good because:

  1. modify function of event DOMContentLoaded.
  2. You can't see the result in the mode edition (using tinymce).

but is an aproach, it's something XD.

Future updates

if you have one that you like to see in the future, send me an email :-) (look at the botton)


  1. http://docs.nibbleblog.com/post/creating-a-simple-hello-world-plugin/
  2. https://github.com/google/code-prettify
  3. https://github.com/google/code-prettify/blob/master/docs/getting_started.md
  4. https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded




comments powered by Disqus