Page tree
Skip to end of metadata
Go to start of metadata

Input the Code

codehighlighting is a tinymce plugin for code syntax highlighting using Alex Gorbatchev's SyntaxHighlighter.

It is part of Newscoop as of 3.4.2 and enabled by default. You can find the corresponding button in the editor bar tool. Once you click on it a window will pop up and there you can paste the code, also you can select the programming language the pasted code was written in.

Code will be saved as part of the content field within pre tags with some special options, so please do not try to change anything of this in HTML mode. If you need to edit the code just do it in Rich Text mode as if you were editing any other part of the article content.

Templating

Now, you need to put some lines on your templates so that SyntaxHighlighter will render all the code in between those pre tags properly.

Put these lines somewhere at the beginning of your page displaying articles:

1) Add the SyntaxHighlighter core file:

<script type="text/javascript" src="http://172.16.0.1/javascript/syntaxhighlighter/scripts/shCore.js"></script>

2) Add at least one brush, here we choose JavaScript. You need to include a brush for every language you want to highlight.

<script type="text/javascript" src="http://172.16.0.1/javascript/syntaxhighlighter/scripts/shBrushJScript.js"></script>

You can see the list of all available brushes in javascript/syntaxhighlighter/scripts/ directory.

There is another much more easier and neat way to do this, depending on your needs, which is to use the autoloader capability of SyntaxHighlighter. Please visit SyntaxHighlighter's official documentation page at http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html for instructions on how to get working the autoloader.

3) Add at least the core default theme for styling.

<link rel="stylesheet" type="text/css" href="http://172.16.0.1/javascript/syntaxhighlighter/styles/shCoreDefault.css" />

4) Finally, to actually run the highlighter, you need to include this one also.

<script type="text/javascript">SyntaxHighlighter.all()</script>

That is it, now you can start editing your articles, adding some code examples through the editor and displaying them in the frontend pages in a professional way.

  • No labels