Hi - i'm a new user to ckeditor - I've downloaded and installed properly (i believe)all of the dependencies for the codesnippet addon [ http://ckeditor.com/addon/codesnippet ]
within config.js i have this: config.extraPlugins = 'codesnippet,lineutils,widget';
When i'm initially writing out the code snippet, it appears in my ckeditor nicely, with all the right highlighting. However, after posting the snippet and saving it to the database - then pulling it out for view, the code is not highlighted.
Highlighted in ckeditor correctly:
Not Highlighted after saving:
I've taken a couple of extra steps just to be sure it wasn't something small I was leaving out so I added
<script type="text/javascript" src="./includes/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<link rel="stylesheet" type="text/css" href="includes/ckeditor/plugins/codesnippet/lib/highlight/styles/googlecode.css" />
to the head section of the page. It seemingly made no difference.
The Fix - Resolved the highlighting issue
After going through all of the documentation I could find online I finally decided it couldn't hurt to read the "readme.md" file located at ckeditor/plugins/codesnippet/lib/highlight/README.md -- it outlines some basic steps to use the pack.
I, of course, set up config.js with the theme I wanted to use per the docs to no avail; however after adding the following to the <head> section of my page, the highlighting now works both in the editor and on the page.
<link rel="stylesheet" type="text/css" href="includes/ckeditor/plugins/codesnippet/lib/highlight/styles/googlecode.css" />
<script type="text/javascript" src="./includes/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="./includes/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
This is my config.js
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'codesnippet,lineutils,widget';
config.codeSnippet_theme = 'googlecode';
};
Correct Highlighting:
That photo is actually using the vs theme.
I'd love to get my hands on a highlighter that actually highlights similiar to w3clubs highlighter script
Maybe i'll work on customizing a highlighter but for now i'm just overly ecstatic with the functionality of ckeditor - this is such an amazing tool. Big shout out to the devs and this community!