请选择 进入手机版 | 继续访问电脑版

北南南北论坛

 找回密码
 立即注册
查看: 17|回复: 0

How to add syntax highlighter in Joomla 3.x

[复制链接]

657

主题

911

帖子

2958

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2958
发表于 2017-12-29 17:45:21 | 显示全部楼层 |阅读模式
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.
Requirements:
Joomla 3.x
Prism syntax highlighter
Sourcerer
HTML Escape
  • I hope you have the working Joomla site together with basic knowledge of using and manipulating Joomla.
  • Download Sourcerer from (regularlabs.com) and install in your Joomla site using extension manager.
  • Visit (Prismjs.com) 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.
  • Download your codes by pressing big buttons bellow the page “Download JS” and “Download CSS”
  • 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.
  • Link your codes by adding them into your site
    1. <head>....</head>
    复制代码

tag by placing updated codes for the snippet below.
  1. <!--Place them inside the head tag-->
  2. <link rel="stylesheet" type="text/css" href="replace_with_location_of_your_folder/prism.css"/>
  3. <script src="replace_with_location_of_your_folder/prism.js" type="text/javascript"> </script>
  4. <!--Place them inside the head tag-->
复制代码


  • Make sure you replace the “replace_with_location_of_your_folder” with actual folder location of the codes.
  • 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:

  • (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.
  • Paste your escaped codes (or normal codes if escaping is not needed between the snipet bellow and click insert.
    1. <pre><code class="language-css">p <!--here--> </code></pre>
    复制代码


  • Save your article and preview it.
    If you want to preview the article with no link vistit http://yoursite.com/index.php?option=com_content&view=article&id=*** (*** is your Joomla article ID)in order to view your article.
Here is my example final result:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="prism.js"></script>
  5. <link href="prism.css" rel="stylesheet" />
  6. </head>
  7. <body>
  8. <pre><code class="language-css">p { color: red }</code></pre>
  9. </body>
  10. </html>
复制代码

Finally
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!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


手机版|北南南北论坛  

GMT+8, 2018-1-24 07:59 , Processed in 0.068920 second(s), 30 queries .

© 2001-2016 VxWorks6 Inc.

快速回复 返回顶部 返回列表