Insert code snippet in CKeditor
We were looking for the plugin for our CKEditor to insert code snippets. After some research on the web I found a great plugin called Syntaxhighlighter Interface.
Because I already have read some good user comments about it and used previously Alex Gorbatchev's SyntaxHighlighter I wanted to give it a try.
Syntaxhighlighter Interface
It is a plugin originally written for CKEditor 3+ that enables code syntax highlighting. Simply said it is interface for Alex Gorbatchev's syntaxhighlighter and it works great with CKEditor 4+ versions.
Installation:
First method: simply use the ckbuilder to add syntaxhighlighter to your editor. Honestly, I recommend using this method, because I had a lot of issues doing the same thing manually, especially if you want to avoid styling issues.
Second method: Download the latest version of plugin here, add the syntaxhighlighter-folder to your ckeditor's subfolder "plugins" and add syntaxhighlighter to the extraPlugins-entry in your config.js. If the plugin doesn't appear try adding an item called 'Syntaxhighlight' to your toolbar.
Configure the syntax highlighter for CKEditor
In the CKEditor configuration file (config.js) add the following code:
config.extraPlugins = 'syntaxhighlight';
Also please add the following code in the configuration file build-config.js:
plugins : { 'syntaxhighlight' : 1 },
Like I said I don’t recommend using custom installation and I recommend using ckbuild instead.
Using the syntax hightlighter
Please note that the proper Text format must be chosen when creating/editing content to have the new added button. During the creation of the content, click on the button with code symbol on it to open the plugin window.
Select the programming language to highlight and insert the code there.
Caution: this plugin simply adds some special markup-tags to your input. For the highlighting-process itself you will need to run Alex Gorbatchev's library on your website too.
Related Posts
GoMage development agency don’t just provide maintenance and Magento support services. They immerse ourselves into the specifics of your business.
The basic concept of any CRM system, which is short for the customer relationship management system, is to build a strong correlation between customers' needs, buying habits, and business.
In today’s era, the online store is in full swing. With the improvement of technology and the internet, the eCommerce business is growing tremendously.
Different types of criminal activities happen in the e-commerce world.
A Magento 2 mobile app for your ecommerce site improves your customers’ experience, increases conversion rates, engages your retaining customers and helps gain new ones.
This guide shows how CRM software, one of the fastest-growing categories of enterprise software. Now about What will CRM look like in 2020 and Beyond.
Comments
comments powered by Disqus