#code highlight

Download Now

TinyMCE4 has no code editor plugin at default. This plugin is a code editor plugin called “tinymce4 code editor”, you can use it in your tinymce editor to toggle code quickly and edit code.

Features:

Common language: It contains common languages in this plugin, and you can add others easily.

Code Edit IDE: It use ACE editor to edit code, the editor has code highlight, syntax check features.

Quick Toggle code: It contains shortcut ‘ctrl + shift + c or command + shift +c(mac)` to toggle code quicly.

Quick Install: Just upload to the tinymce plugins’ folder and update tinymce configurations. That is it.

Source Code: Nothing is hidden.

Installation

Upload the files to the tinymce plugins’ folder.

Update your tinymce configuration to add `leaui_code_editor` plugin, eg:

tinymce.init({ selector: "textarea", plugins: [ "leaui_code_editor", "advlist autolink link lists charmap hr anchor pagebreak", "directionality textcolor paste fullpage textcolor" ], toolbar1: "leaui_code_editor | styleselect formatselect fontselect fontsizeselect | bold italic underline strikethrough " });

Note: The default css in tinyce has no ”<pre>” style, you need to add another css file which contains the “pre” style to tinymce(use content_css option), eg:

Best Syntax Highlighter WordPress Plugins You Must Have

If you are a coding expert, or a developer, you must be aware about how important Syntax Highlighting actually is as it helps in easy code-reviews and it helps in reading the code in a structured format. Hence, every coder loves an editor which incorporates syntax highlighting. This feature of syntax highlighting finds its use in content tools too where it is used for mark-up languages, scripting…

If you are a programmer or a developer and you have a blog that you use to share code snippets then it is helpful if the blocks of codes are well formatted. It really helps if the syntax are highlighted.

I was looking for a neat styling of code snippets in my posts and found the Google's Prettify to be a good solutio for now. The following setup instructions are an extention on the Snippets of Code.

1. In your blog settings (cogwheel at the top) click the blog in the left panel. Click Theme Customize. Once theme opens click the Edit HTML. This opens an HTML editor.

2. Find the closing </head> tag and insert the wollowing snippet in front of it.

<!-- BEGIN: Code Syntax Highlighting --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"></link>  <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>  <script>     function styleCode() {         if (typeof disableStyleCode != 'undefined') { return; }         var a = false;                 $('code').each(function() {             if (!$(this).hasClass('prettyprint')) {                 $(this).addClass('prettyprint');                 a = true;             }         });         if (a) { prettyPrint(); }     }     $(function() {styleCode();}); </script> <!-- END: Code Syntax Highlighting -->

3. The code above finds all <code> tags and sets class="prettyprint" attribute. Click Update Preview and then Save.

4. Now edit a post and insert a code you want highlighted. Now click HTML button while you are still editing the post, find the newly inserted text and embrace it into a pair of <pre><code>...</code></pre> tags. Example:

       private string path;         public string Path         {             get { return this.path; }             private set             {                 this.SetProperty(ref this.path, value);             }         }

For a code-to-HTML conversion that produces standalone HTML with formatted code there are a few online tools available:

https://gist.github.com/

http://www.manoli.net/csharpformat/

http://hilite.me/

http://tohtml.com/csharp/

Hi everyone! Suppose not a lot of people will read this, but this is my first post and i will post some code stuff in this blog (C#, JavaScript, etc.)

And the first problem is code hightlight in Tumblr, an as i see there are 2 options.

1) use javascript prettify script http://code.google.com/p/google-code-prettify/. Here you can reed how to add it to your tumblr blog http://hoffmann.tumblr.com/post/48187664/add-syntax-highlighting-to-tumblr

2) use pygments (http://pygments.org/).

I prefer pygments because you can use it not only to produce final html markup but for example LaTeX or other. All the documentation you can find on pygments site.

And of course the example (XML hightlight):

<?xml DOCTYPE ?> <test attr="value" attr2="anotherValue"> <!-- Comment --> </test>

Use this command to generate full html with css classes: