Ehsan Ghanbari

Experience, DotNet, Solutions

Syntaxhighlighter plugin in CKEditor

 There are lots of plugins for CKEditor and one of the most used plugin for the developers is SyntaxHighlighter. In order to get and install this nice one with a sexy them like the following picture:

Get the latest version from the website and copy the content of the plugin into the plugin folder. Note that you should get the requirement plugin of every plugin in CKEditor of course, you will see the following popup modal after clicking the download button:

And the Dialog plugin needs Dialog User Interface as well. So after getting all three plugins and putting in the plugin folder. You just need to define the plugin like below:

<textarea id="js-my-textarea"></textarea>

<script type="text/javascript">

    CKEDITOR.replace('js-my-textarea', {

        "extraPlugins": 'syntaxhighlight'

    }); 

</script>


 

If you run your application you will see the plugin, you just need to copy and paste your code and select the language. That's all!

 

 

But you don't have that sexy highlighter yet! You need to add some CSS and JS code wherever your final body would be rendered. You have to get those extra files from highlighter web site. Get the latest version, after extracting you will see Scripts and Styles folder:

 

 

Some files are needed to be referenced like XRegExp.js, shCore.js, shCore.css, shThemeDefault.css :

 

    <script src="~/Content/syntaxhighlighter/scripts/XRegExp.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shCore.js"></script>

    <script src="~/Content/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushCss.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushJScript.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushPython.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushRuby.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushSql.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushXml.js"></script>

    <link href="~/Content/syntaxhighlighter/styles/shCore.css" rel="stylesheet" />
    <link href="~/Content/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" />
    <script type="text/javascript">SyntaxHighlighter.all();</script>
 

Then you can reference all the language you want to highlight. By the way, you can find some other template rather than the default (shThemeDefault.css) in the same folder. 

About Me

Ehsan Ghanbari

Hi! my name is Ehsan. I'm a developer, passionate technologist, and fan of clean code. I'm interested in enterprise and large-scale applications architecture and design patterns and I'm spending a lot of my time on architecture subject. Since 2008, I've been as a developer for companies and organizations and I've been focusing on Microsoft ecosystem all the time. During the&nb Read More

Post Tags
Pending Blog Posts
Strategic design
Factory Pattern
time out pattern in ajax
Selectors in Jquery
using Log4net in asp.net MVC4
How to use PagedList In asp.net MVC
Redis as a cache server
Domain driven design VS model driven architecture
What's the DDD-lite?
Multiple submit buttons in asp.net MVC
comments powered by Disqus