Note: I'm using yeoman, but you can manually download script extract parts and do all other boring stuff...
What is Google Code prettify?
I want to use it on my blog. It sounds easy, just include script from cdn in html, add
<pre> tag and thats it.
With this approach I had some issues:
- this script is injecting css file that changes style of a
<pre>tags, that transition was looking very ugly
- the script includes additional scripts for handling a languages that i will never use. Although it is not a big problem, it can be easy solved together with the first one
- i don't have an easy way of adding prettyprint class to a tags since I'm using md processor
Using with bower
This post is extension to my previous post (responsive blog layout with bootstrap)[responsive-blog-layout-with-bootstrap.html]. I've started using yeoman there, and bower is part of yeoman. You can find here google code prettify library as a bower component.
bower install --save google-code-prettify
I will include only main file, and lang-* files for language I think i will need.
They are calling lang-*.js files language handlers. There is a repo with additional handlers here
<script src="bower_components/google-code-prettify/src/prettify.js"></script> <script src="bower_components/google-code-prettify/src/lang-css.js"></script> <!-- Additional handlers here -->
Now I want to add classes to all
<pre> tags. I was looking for more elegant solution than this, but I guess it has to be like this:
You will not see any changes because we haven't included any styles for code. I will use prettify.css, which is in src folder, copy it to my css file (in my case I'll make a copy and include it in less) and change it there. And that is it.