Syntax Highlighter plugin for YII based Blog or website


If you are a programming blogger or you need to provide some code reference into your blog or website, it is always good to add up an extension for syntax highlighting, it makes your code example stand out. in this tutorial we provide a step by step reference of how you can do it in YII based blog or website

syntaxhighlighter

Syntax Highlighter is an excellent utility if you are posting some source code on your blog, and most of the blogging platforms like joomla and wordpress have plug-in support to accomplish the task.

But what if you are using some framework to make a completely customize website or blog and on that platform you want to post the code. I am going to demonstrate how you can do that with the YII framework, after all it is one of the widely used framework in php.

To do so we need the extension of course, and at the moment is Alex Gorbatchev's SyntaxHighlighter. But only this will not make the task so easy for you to use in your application. You need the extension for your framework, which you can get here.

I am using JMXSyntaxHighlighter for the purpose of this tutorial as it makes it easy. so after you are done downloading extract the files and it'll be a folder containing the extension. This folder has 3 components to itself.

JMXSyntaxHighlighter(Parent)
|_syntaxhighlighter(Folder/Directory)
|_JMSyntaxHighlighter.php
|_readme.md

Although you'll get further instruction in the readme file, yet I am proceeding further.

Anyway, What you need to do now is, Upload the parent folder i.e. JMXSyntaxhighlighter into the extensions directory, its located usually in protected directory. So now the complete path becomes,

/public_html/protected/extensions/JMXSyntaxhighlighter

Funny to say but most of the work is already done by now, the remaining is to tell your framework that it is there. so now open up your main configuration file which is located in config directory and add following code as an element of array to the component array.


'syntaxhighlighter' => array(
'class' => 'ext.JMSyntaxHighlighter.JMSyntaxHighlighter',
),

so that complete code of component would look like


'components' => array(
'syntaxhighlighter' => array(
'class' => 'ext.JMSyntaxHighlighter.JMSyntaxHighlighter',
),
//rest of the component array elements
),

and by now even your framework knows that it is there.
Now lets move to the final part of the process.
on the page where you would like the syntax highlighted, you need to add following line of code.


<?php Yii::app()->syntaxhighlighter->addHighlighter(); ?>

All it does to that page at runtime is, it includes the necessary javascript files to that page so you better include it in the header of page where you are more likely to need it.

Thats all for the framework side, now for the content side, where you are going to compose the code.

just use following approach

 


<pre class="brush:php">
<?php
echo "hello world";
?>
</pre>

where php can be replaced by the supported language alias. you can see the complete list here.

Reference:

Syntaxhighlighter installation guide