How to add syntax highlighter in Joomla 3.x

Maangatech > Web Design > How to add syntax highlighter in Joomla 3.x

Sayntax Highliter

Sometime as a passionate web developer you need to display some code snippets in your Joomla site especially in articles.

If you know the way of archiving this goal, your task it could be very simple; but if you didn’t know how to archive your goal it will frustrate you. When I was browsing in Joomla extensions directory I wonder to find that there is no stable extension for this task. Unfortunately on the web there are several ways of archiving syntax highlighting but some of them are not working properly and others affects site performance. Here I will guide you through step by step toward adding Prism syntax highlighter in your Joomla site.


Joomla 3.x
Prism syntax highlighter
HTML Escape

  1.  I hope you have the working Joomla site together with basic knowledge of using and manipulating Joomla.
  2. Download Sourcerer from ( and install in your Joomla site using extension manager.
  3. Visit ( and download Prism extensible syntax highlighter library. When on download page do:
  • Select Minified Version.
  • Select desired theme. For my side I will choose Coy.
  • Choose language you’re going to highlight in your site as you wish. For me I will choose Markup (HTML), CSS, JavaScript, PHP, and SQL.
  • Remember as you chose many languages, the size of library files increase.
  • Choose desired plugins, here I advise you to select “Line Highlight”, “Copy to Clipboard Button”, “Toolbar” and “Line Numbers” unless you are a programmer.
  1. Download your codes by pressing big buttons bellow the page “Download JS” and “Download CSS”
  2. Create folder in your root server of your site and name it to any name you can recall, upload those two files to that folder; make sure you can access them.
  3. Link your codes by adding them into your site

    tag by placing updated codes for the snippet below.

    <!--Place them inside the head tag-->
    <link rel="stylesheet" type="text/css" href="replace_with_location_of_your_folder/prism.css"/>
    <script src="replace_with_location_of_your_folder/prism.js" type="text/javascript"> </script>
    <!--Place them inside the head tag-->

    Make sure you replace the “replace_with_location_of_your_folder” with actual folder location of the codes.

  4. In your Joomla site administrator Navigate to Content->Articles->Add new Article to create test article (For me I will show my example at the bottom of this article). At the top left of the editor there is new button from Sourcerer plugin that will help us to embed custom code in Joomla site labeled [<> Code]. Click it and you will see the snippet in a modal. Next modify the snippet as shown below and do not click insert.
    Note! for HTML it should be class=”language-markup”, CSS class=”language-CSS”, PHP class=”language-php, JavaScript class=”language-js” and SQL class=”language-sql”. For more languages visit This Link. Also you can remove class=”line-numbers” if you don’t want to show numbers in your snippet.

Your sippet should be modified inside Sourcerer modal between {source}….{/source} tag as:


  1. (If your language does not require escaping like CSS skip to number 9) Copy your code snippet you want to highlight and got to (Html-escape) paste your snippet and click ESCAPE button; after Escaping your codes copy escaped codes.
  2. Paste your escaped codes (or normal codes if escaping is not needed between the snipet bellow and click insert.
    <pre><code class="language-css">p <!--here--> </code></pre>
  3. Save your article and preview it.
    If you want to preview the article with no link vistit*** (*** is your Joomla article ID)in order to view your article.

Here is my example final result:

<!DOCTYPE html>
<script src="prism.js"></script>
<link href="prism.css" rel="stylesheet" />
<pre><code class="language-css">p { color: red }</code></pre>

I hope if you followed all procedures correctly you can see a nice syntax highlight in your site. If you encountered any problem or you have any suggestion or question please let me know. Furthermore, I will be happy if you tell me that it worked for you in the comments below. Thanks!

iexcel_post_nav(); ?>
0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments