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.

Comments

  1. User Avatar
    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

  2. User Avatar
    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.

  3. User Avatar
    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?

  4. User Avatar
    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/

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag