Screen Shot 2016-02-17 at 09.39.56

Most of my interest is related to code and web development in general so, I needed a nice Syntax Highlighter. After testing a few I decided to go with PrismJS: A lightweight, extensible syntax highlighter, built with modern web standards in mind and Created by Lea Verou.

Installing WP Prism Syntax Highlighter plugin.

Although you don’t need any plugin to setup Prism in your theme I decided to download WP Prism Syntax Highlighter because provides a short-code to insert Prism’s code easily.

This plugin contains:

  • All languages definitions,
  • No Prism plugins,
  • Default theme.

If you want to take full advantage of Prism’s features you need to go to the download site and customize it to fit your needs. You can download plugins, themes, and more.

Download the JS and CSS files, go to WordPress Settings / Prism and put the name of your files. Do not delete the old files.

Screen Shot 2016-02-17 at 09.36.57

Inserting Code In Your Posts

Jetpack’s Markdown module works fine with Prism but it its most basic way. Insert back-sticks, plus the language and you’re good to go.

```language-ruby
def authenticate_admin_user!
  authenticate_user!
  unless current_user.is_admin?
    flash[:warning] = "This area is restricted to administrators only."
    redirect_to root_path
  end
end
```

However if you want to use line numbers, line highlighting and other Prism features you need to insert code manually or use WP Prism Syntax Highlighter’s short-code button.

Screen Shot 2016-02-17 at 10.08.10


Examples

JavaScript:
<pre class="line-numbers"><pre class="line-numbers"><code class="language-javascript">function changeColor(newColor) {
  var elem = document.getElementById("para1");
  elem.style.color = newColor;
}</code></pre>
function changeColor(newColor) {
  var elem = document.getElementById("para1");
  elem.style.color = newColor;
}
Ruby with line 5 highlighted:
<pre class="line-numbers" data-line="5"><code class="language-ruby">def authenticate_admin_user!
  authenticate_user!
  unless current_user.is_admin?
    flash[:warning] = "This area is restricted to administrators only."
    redirect_to root_path
  end
end</code></pre>
def authenticate_admin_user!
  authenticate_user!
  unless current_user.is_admin?
    flash[:warning] = "This area is restricted to administrators only."
    redirect_to root_path
  end
end

I’m just scratching the surface here, feel free to experiment more with Prism.

Leave a Reply

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

About ivor

I'm a Front-end Developer working at Envato as a Quality Senior Reviewer @ ThemeForest.

Category

Web Development

Tags

, ,