Syntax Highlight for Drupal with Built-in highlight.js on CKEditor

  • Posted on: 24 July 2014
  • By: oon
Highlight.js Syntax Highlighting for the Web

It's almost 2 years since I wrote about Highlight.js on this blog.

And suddenly few days ago after I update to latest version of CKEditor, the syntax highlighting process on this blog got problem.

I decide to re-install HighlightJS and also the CKEditor (now with CDN data).

Since CKEditor 4.4, it has new feature, syntax highlighting, and the default mechanism using Highlight.JS [1].

Here's few steps on my Highlight.js updates:

  • remove CKEditor module
  • remove Highlight.js module (also the filter)
  • install CKEditor module with CDN data, so no need to upload CKEditor library anymore.
  • disable CKEditor ACF so I can use tag <code>
  • edit my Drupal theme (based on best_responsive) style.css. I remove the background, margin and padding
  • add css and js to theme's header (on file templates/html.tpl.php)
<link rel="stylesheet" href="">
<script src="" type="text/javascript"></script>

or you can install CKEditor codesnippet plugin [2], and change the URL:

<link rel="stylesheet" href="/sites/all/modules/ckeditor/plugins/codesnippet/lib/highlight/styles/xcode.css">
<script src="/sites/all/modules/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js" type="text/javascript"></script>
  • and done! all the previous codes with tag <pre><code>MYCODE</code></pre> are back highlighted.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.