Using Syntax highlighter in Tinymce with syntaxhl

Syntax highlighter is important for programmers, coders and developers to post their code syntax online which will stand highlighted and look pretty in any article or blog. Today we will discuss how to add Syntax highlighter in Tinymce so that user can add their code in their article properly.

First download Syntax highlighter from here and add in the directory where you put Tinymce.
Now download a plugin which will add syntax highlighter code to the syntax in Tinymce there are some plugin available we are using syntaxhl which you can download from here.
Now add this plugin in the folder of plugins in Tinymce then the path will become   

tiny_mce/plugins/syntaxhl

Now add the syntaxhl in the plugin list where rest of the Tinymce plugins are listed which will add the highlighter image in toolbar given with syntaxhl plugin.

  $('textarea.tinymce').tinymce({

      script_url: '/adminpath/tiny_mce/tiny_mce.js',
      theme : "advanced",
	  skin:"Advanced",
	  language:"en",
	  plugins :"autosave,wordcount,lists,preview,paste,tabfocus,autolink,syntaxhl",
      theme_advanced_buttons1 :"bold,italic,underline,|,fontselect,|,syntaxhl,",
      theme_advanced_buttons2 : "cut,copy,paste,|,link,unlink,anchor,image,",
     
	  relative_urls : false
   });

When you click on the highlighter button the new window will be opened where you can paste your code, select language, highlight options, toolbar options.

Now where you want to add the highlighter code add the Highlighter script brushes files and add script for Syntax highlighter like below

This syntax will trigger the Syntax Highlighter where it will find the brush class. Syntax Highlighter is has vast collection of programming languages which will make easy for any developer to add code snippet in blog articles easily.