# pbckcode

 A CKEditor plugin to easily add code into your articles.

 The plugin will create a dialog where you will be able to format your code as your will. When you press the **OK** button, the plugin will create a *pre* tag with your code inside.

 # Demo

 See it in action ! http://prbaron.github.com/pbckcode/

 # Installation

 1. Download the plugin from the Github repository : [https://github.com/prbaron/pbckcode/tags](https://github.com/prbaron/pbckcode/tags)

 2. Rename it to **pbckcode** (it will be easier to call it into CKEditor)

 3. Place the folder into the plugins folder of CKEditor ( *{Path to CKEDitor}/plugins/* )

 4. Open the config.js file and add the following lines :

 ```

  CKEDITOR.editorConfig = function( config ) {

      // CKEDITOR TOOLBAR CUSTOMIZATION

      // I only set the needed buttons, so feel frey to add those you want in the array

      config.toolbarGroups = [

          { name: 'pbckcode' } ,

          // you other buttons here

      ];

      // CKEDITOR PLUGINS LOADING

      config.extraPlugins = 'pbckcode'; // add other plugins here (comma separated)

      // ADVANCED CONTENT FILTER (ACF)

      // ACF protects your CKEditor instance of adding unofficial tags

      // however it strips out the pre tag of pbckcode plugin

      // add this rule to enable it, useful when you want to re edit a post

      config.allowedContent= 'pre[*]{*}(*)'; // add other rules here

      // PBCKCODE CUSTOMIZATION

      config.pbckcode = {

          // An optional class to your pre tag.

          cls : '',

          // The syntax highlighter you will use in the output view

          highlighter : 'PRETTIFY',

          // An array of the available modes for you plugin.

          // The key corresponds to the string shown in the select tag.

          // The value correspond to the loaded file for ACE Editor.

          modes :  [ ['HTML', 'html'], ['CSS', 'css'], ['PHP', 'php'], ['JS', 'javascript'] ],

          // The theme of the ACE Editor of the plugin.

          theme : 'textmate',

          // Tab indentation (in spaces)

          tab_size : '4'

      };

  };

 ```

 And you are good to go! You will have the same configuration than the demo.

 # Options

 ## highlighter

 Choose your synta highlighter output. Remove the option if you want to output a basic <pre> tag, otherwise, choose one of them.

 ```

 'HIGHLIGHT' // http://highlightjs.org/

 'PRETTIFY' // https://code.google.com/p/google-code-prettify/

 'PRISM' // http://prismjs.com/

 'SYNTAX_HIGHLIGHTER' // http://alexgorbatchev.com/SyntaxHighlighter/

 ```

 ## modes

 ```

 // Available modes

 ['C/C++'        , 'c_pp']

 ['C9Search'     , 'c9search']

 ['Clojure'      , 'clojure']

 ['CoffeeScript' , 'coffee']

 ['ColdFusion'   , 'coldfusion']

 ['C#'           , 'csharp']

 ['CSS'          , 'css']

 ['Diff'         , 'diff']

 ['Glsl'         , 'glsl']

 ['Go'           , 'golang']

 ['Groovy'       , 'groovy']

 ['haXe'         , 'haxe']

 ['HTML'         , 'html']

 ['Jade'         , 'jade']

 ['Java'         , 'java']

 ['JavaScript'   , 'javascript']

 ['JSON'         , 'json']

 ['JSP'          , 'jsp']

 ['JSX'          , 'jsx']

 ['LaTeX'        , 'latex']

 ['LESS'         , 'less']

 ['Liquid'       , 'liquid']

 ['Lua'          , 'lua']

 ['LuaPage'      , 'luapage']

 ['Markdown'     , 'markdown']

 ['OCaml'        , 'ocaml']

 ['Perl'         , 'perl']

 ['pgSQL'        , 'pgsql']

 ['PHP'          , 'php']

 ['Powershell'   , 'powershel1']

 ['Python'       , 'python']

 ['R'            , 'ruby']

 ['OpenSCAD'     , 'scad']

 ['Scala'        , 'scala']

 ['SCSS/Sass'    , 'scss']

 ['SH'           , 'sh']

 ['SQL'          , 'sql']

 ['SVG'          , 'svg']

 ['Tcl'          , 'tcl']

 ['Text'         , 'text']

 ['Textile'      , 'textile']

 ['XML'          , 'xml']

 ['XQuery'       , 'xq']

 ['YAML'         , 'yaml']

 ```

 ## theme

 ```

 // Bright themes

 'chrome'

 'clouds'

 'crimson_editor'

 'dawn'

 'dreamweaver'

 'eclipse'

 'github'

 'solarized_light'

 'textmate' // default theme

 'tomorrow'

 'xcode'

 'kuroir'

 'katzenmilch'

 ```

 ```

 // Dark themes

 'ambiance'

 'chaos'

 'clouds_midnight'

 'cobalt'

 'idle_fingers'

 'kr_theme'

 'merbivore'

 'merbivore_soft'

 'mono_industrial'

 'monokai'

 'pastel_on_dark'

 'solarized_dark'

 'terminal'

 'tomorrow_night'

 'tomorrow_night_blue'

 'tomorrow_night_bright'

 'tomorrow_night_eighties'

 'twilight'

 'vibrant_ink'

 ```

 # Special Thanks

   * CKEditor : [http://ckeditor.com/](http://ckeditor.com/)

   * ACE : [http://ace.ajax.org/](http://ace.ajax.org/)

   * Lea Verou : [http://prismjs.com/](http://prismjs.com/)

   * Google : [https://code.google.com/p/google-code-prettify/](https://code.google.com/p/google-code-prettify/)

   * Ivan Sagalaev : [http://highlightjs.org/](http://highlightjs.org/)

   * Alex Gorbatchev : [http://alexgorbatchev.com/SyntaxHighlighter/](http://alexgorbatchev.com/SyntaxHighlighter/)

 # Credits

 #### Pierre Baron

 Website : [http://www.pierrebaron.fr](http://www.pierrebaron.fr)

 Twitter : [@prbaron](https://twitter.com/prbaron)

 Contact : <prbaron22@gmail.com>