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="http://cdn.ckeditor.com/4.4.3/full-all/plugins/codesnippet/lib/highlight/styles/default.css">
<script src="http://cdn.ckeditor.com/4.4.3/full-all/plugins/codesnippet/lib/highlight/highlight.pack.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</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>
<script>hljs.initHighlightingOnLoad();</script>
  • and done! all the previous codes with tag <pre><code>MYCODE</code></pre> are back highlighted.

[1]http://docs.ckeditor.com/#!/guide/dev_codesnippet-section-enabling-synta...
[2]http://ckeditor.com/addon/codesnippet
[3]https://api.drupal.org/api/drupal/modules!system!html.tpl.php/7

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.