Git Product home page Git Product logo

pbckcode's Introduction

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
  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' } ,
         // your other buttons here
         // get information about available buttons here: bhttp://docs.ckeditor.com/?mobile=/guide/dev_toolbar
     ];
 
     // 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
     // only needed on v1.1.x
     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

Credits

Pierre Baron

Website : http://www.pierrebaron.fr
Twitter : @prbaron
Contact : [email protected]

pbckcode's People

Contributors

borian avatar mgarin avatar osxi avatar mend-bolt-for-github[bot] avatar

Watchers

James Cloos avatar YJSoft avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.