The Lodge → The Big v10 Redesign Project → #027: Code Syntax Highlighting, Part 1

#027: Code Syntax Highlighting, Part 1

(Updated on )

As far back as I can remember, I used Google Code Prettify to apply the syntax highlighting on code block on CSS-Tricks. You know, where in a line like <div>test</div>, the <div> part is a different color than the test part. This is very helpful for code readability. It also helps readers instantly understand what they are looking at is a code block (people like to scan articles, don’t you know).

In this new design, we decide to go with the freshly released Prism.js instead. It’s quite a bit lighter weight and faster. It’s also tailored to work just with HTML, CSS, and JavaScript, which is 95% of the code on CSS-Tricks. I also quite like how the class names used for coloring are rationally named.

We start to figure out how exactly to use it. First of all, we tell CodeKit to concatenate this library into our global JavaScript file (which is empty so far, but we’ll be writing code there later). We link up the compressed JavaScript file in our included footer part.

It takes us a minute to understand that there isn’t anything you “call”, it just kinda works assuming you have the correct class names in place. We finish up by playing around with the CSS a little bit and making the code look more like it always has on CSS-Tricks.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Gray Ghost Visuals
    Permalink to comment#

    The Google Code Prettycrappify has to be the bulkiest briefcase I’ve ever picked up.

    Look at those HTTP requests go! – Also a stylesheet too BTW. Yay! another request!

    <script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shCore.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushJScript.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushJava.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushVb.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushSql.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushXml.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushPython.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCss.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

    As you can see I’m lookin’ to switch :) What else is out there that can also give Devs the ability to copy into their clipboard and still have line numbers without the crummy HTTP requests above?

    Lastly, don’t forget this cool little tool you’ve suggested in the past that makes your demo code friendly to markup; I’m using it right now.
    http://www.elliotswan.com/postable

    Reply
  2. Seth Hall
    Permalink to comment#

    Hey Chris,

    In CodeKit, the checkmarks beside the project names might help with the project reload time. I haven’t checked but just a thought.

    Reply
  3. Ahrengot
    Permalink to comment#

    Hey Chris,

    I’m guessing the [html] and [css] buttons in your WordPress editors are shortcuts to

    <pre rel='css'>
    <code>
        /*content here ... */
    </code>
</pre>

    Do you have a snippet to create buttons like that?

    Reply
  4. blwoosky
    Permalink to comment#

    hi chris,
    i use the prism to display the html ,but it does not work only with html…(sorry ,my english is not ok,but i think you can understand what i want to say.),here is the page:
    http://csssong.com/hello-world/

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *