Crayon Tag Editor

I’m happy to announce that in 1.9.0, Crayon will feature a built in Tag Editor in both the Visual and HTML editors of WordPress! Normally, you’d have to type the shortcode in HTML editor and make sure you use the right language ID and so forth. Overriding default settings, like changing the theme, font and toolbar settings was more work than necessary. Now these settings are all built into the new user interface.

How It Works

  1. Use on the Visual Editor toolbar, or on the HTML Editor toolbar to open the Tag Editor.
  2. Use the Tag Editor to add code and change settings. Click “Add” to insert the code into the post.

  3. You can edit the generated <pre> tag in both editors. If you’re using the Visual Editor, you can select the code block with your mouse (it will become blue) and click the Tag Editor button again to open the same window and modify both the code and the settings. Then click “Save” when you’re done.

Inline Tags

You can also create and edit Inline Tags by ticking the “Inline Tag” option.

To edit the Inline Tag, once again select the generated <span> with your mouse cursor (it will become green) and click the Tag Editor button.

Overriding Settings

This makes editing code in WordPress super easy, and even more welcoming is the fact you can now override all of Crayons global settings for a single Crayon using the same interface you’re used to in the Settings screen. Any changes you make show up yellow and are automagically added to the code block, and you can then select the code block with your mouse and edit them later :)

  • http://mutetella.org/ mutetella

    Oh… that’s wonderful, cause that horrible TinyMCE don’t let me put things like
    That’s a header
    and when I try
    <h1>That’s a header&lt/h1>
    crayon shows me &lt, instead of <…

    Hope, that this will work wth Crayon 1.9…

    mutetella

    • http://mutetella.org/ mutetella

      Oh no… ;-)
      This is, what I wanted to say:
      I found no way to write things like foobar cause TinyMCE changed this in foobar …

      • http://aramk.com/ Aram Kocharyan

        I see what you mean. I’ll need to update this post sometime before it’s released. To set the language, use . This is what the Tag Editor will do for you automatically. Make sure to add decode:true or decode:1 as well in the class attribute if you’re using the Visual Editor, so & lt; becomes <. But of course, if you’re using the Visual Editor, just let the Tag Editor do the hard work for you, that’s its job :)

        • mutetella

          Sorry, I have not expressed myself clearly…:
          I’m using Crayon 1.8.3 and have the problems described in my first comment(s). My hope is, with the Crayon Tag Editor it is possible to display html-code proper.
          Inner Version 1.8.3 without Tag Editor I can’t find a solution to display less-than and greater-then chars inner -Tag.

          • http://aramk.com/ Aram Kocharyan

            Oh ok. Hmm… You probably don’t want to use 1.8.3 in the visual editor. Can you try the latest beta?

            http://dl.dropbox.com/u/33811812/Crayon/crayon-syntax-highlighter-1.9.0-7.zip

          • mutetella

            Thank’s for the link… With 1.9 and the ‘decode’-attribute it works fine when I use & lt; or & gt; instead the raw ”-chars. Code which is typed in the Tag Editor shouldn’t have ”-chars cause inner the ‘< pre …' tag this will be interpreted as the beginning or ending of any html tag. Would it not have been better when the Tag Editor will convert '’-chars to & lt; and & gt;?

          • http://aramk.com/ Aram Kocharyan

            Yep :) It’s in the latest beta. An oversight by me, that’s what betas are for :) Glad I didn’t publish yet. http://t.co/HHOKCYyK 

      • http://aramk.com/ Aram Kocharyan

        Also, if you use <pre class="lang:php decode:true " title="a title" lang="html">...</pre> in the HTML editor it won’t remove the lang part (only editing an existing Crayon in the Tag Editor will remove all but title attribute) but then it will use html instead of php (the html in the class tag is ignored). Whatever comes last will be set. But you should set language in the class attribute if you’re using the Tag Editor anyway. I’ll make a fix so that it doesn’t remove all but the title attribute in a pre tag (but I designed it to do this). Maybe you’d like an alt or something in there as well, why not :)

  • Pingback: Crayon Syntax Highlighter

  • Sebastian N.

    Would you consider it easy adapting your code for a syntax highlighting function on a non-wordpress website? 
    I am currently using GeSHi but I needed a few extra components to make it look and feel decent ( http://i.imgur.com/Jz58E.png). 

    I like your solution because it already implements scrollbars and a copy code functionality as well as themes.

    • http://aramk.com/ Aram Kocharyan

      Yes it should be, I’ve made sure to decouple it from the wp files which have _wp suffixes. I’ll put up a quick sample of how to do it in a few hours. You’ll need PHP of course, so it’ll be implementable for joomla etc. or no CMS at all.

    • http://aramk.com/ Aram Kocharyan

      Does this help: http://aramk.com/crayon/using-crayon-manually-in-php/

  • Pingback: Лучший плагин для подсветки кода на Wordpress | IT по-своему

  • jiji

    Could you help speed up the page loading with your plugin? I see the page loading was slowed significantly when I start up your plugin for code embedding and syntax highlighting.

  • luzan

    Is this Plugin SEO friendly?

  • Pingback: WP代码高亮插件 Crayon Syntax Highlighter | BccSafe's Blog

  • msrosyidi

    I’m still looking for how to place a button in the comment area to insert the code using this plugin.

    • http://aramk.com/ Aram Kocharyan

      This should be possible if you enable a TinyMCE plugin for comments, and then check “Display the Tag Editor in any TinyMCE instances on the frontend”

  • Pingback: Mini Tags And Plain Tags In Crayon

  • http://twitter.com/WiFau Daniele Faugiana

    Is it possible to hide the options in the Crayon window in an “easy way”? I don’t want my users to be able to override my default settings. I’d like to let them post their code in bbPress forums but not to change any of my settings. Thank you.

  • Pingback: Crayon Syntax Highlighter | Askella