|
1 # pbckcode |
|
2 |
|
3 A CKEditor plugin to easily add code into your articles. |
|
4 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. |
|
5 |
|
6 # Demo |
|
7 See it in action ! http://prbaron.github.com/pbckcode/ |
|
8 |
|
9 # Installation |
|
10 1. Download the plugin from the Github repository : [https://github.com/prbaron/pbckcode/tags](https://github.com/prbaron/pbckcode/tags) |
|
11 2. Rename it to **pbckcode** (it will be easier to call it into CKEditor) |
|
12 3. Place the folder into the plugins folder of CKEditor ( *{Path to CKEDitor}/plugins/* ) |
|
13 4. Open the config.js file and add the following lines : |
|
14 |
|
15 ``` |
|
16 CKEDITOR.editorConfig = function( config ) { |
|
17 // CKEDITOR TOOLBAR CUSTOMIZATION |
|
18 // I only set the needed buttons, so feel frey to add those you want in the array |
|
19 config.toolbarGroups = [ |
|
20 { name: 'pbckcode' } , |
|
21 // you other buttons here |
|
22 ]; |
|
23 |
|
24 // CKEDITOR PLUGINS LOADING |
|
25 config.extraPlugins = 'pbckcode'; // add other plugins here (comma separated) |
|
26 |
|
27 // ADVANCED CONTENT FILTER (ACF) |
|
28 // ACF protects your CKEditor instance of adding unofficial tags |
|
29 // however it strips out the pre tag of pbckcode plugin |
|
30 // add this rule to enable it, useful when you want to re edit a post |
|
31 config.allowedContent= 'pre[*]{*}(*)'; // add other rules here |
|
32 |
|
33 |
|
34 // PBCKCODE CUSTOMIZATION |
|
35 config.pbckcode = { |
|
36 // An optional class to your pre tag. |
|
37 cls : '', |
|
38 |
|
39 // The syntax highlighter you will use in the output view |
|
40 highlighter : 'PRETTIFY', |
|
41 |
|
42 // An array of the available modes for you plugin. |
|
43 // The key corresponds to the string shown in the select tag. |
|
44 // The value correspond to the loaded file for ACE Editor. |
|
45 modes : [ ['HTML', 'html'], ['CSS', 'css'], ['PHP', 'php'], ['JS', 'javascript'] ], |
|
46 |
|
47 // The theme of the ACE Editor of the plugin. |
|
48 theme : 'textmate', |
|
49 |
|
50 // Tab indentation (in spaces) |
|
51 tab_size : '4' |
|
52 }; |
|
53 }; |
|
54 ``` |
|
55 And you are good to go! You will have the same configuration than the demo. |
|
56 |
|
57 # Options |
|
58 |
|
59 ## highlighter |
|
60 |
|
61 Choose your synta highlighter output. Remove the option if you want to output a basic <pre> tag, otherwise, choose one of them. |
|
62 |
|
63 ``` |
|
64 'HIGHLIGHT' // http://highlightjs.org/ |
|
65 'PRETTIFY' // https://code.google.com/p/google-code-prettify/ |
|
66 'PRISM' // http://prismjs.com/ |
|
67 'SYNTAX_HIGHLIGHTER' // http://alexgorbatchev.com/SyntaxHighlighter/ |
|
68 ``` |
|
69 |
|
70 ## modes |
|
71 ``` |
|
72 // Available modes |
|
73 ['C/C++' , 'c_pp'] |
|
74 ['C9Search' , 'c9search'] |
|
75 ['Clojure' , 'clojure'] |
|
76 ['CoffeeScript' , 'coffee'] |
|
77 ['ColdFusion' , 'coldfusion'] |
|
78 ['C#' , 'csharp'] |
|
79 ['CSS' , 'css'] |
|
80 ['Diff' , 'diff'] |
|
81 ['Glsl' , 'glsl'] |
|
82 ['Go' , 'golang'] |
|
83 ['Groovy' , 'groovy'] |
|
84 ['haXe' , 'haxe'] |
|
85 ['HTML' , 'html'] |
|
86 ['Jade' , 'jade'] |
|
87 ['Java' , 'java'] |
|
88 ['JavaScript' , 'javascript'] |
|
89 ['JSON' , 'json'] |
|
90 ['JSP' , 'jsp'] |
|
91 ['JSX' , 'jsx'] |
|
92 ['LaTeX' , 'latex'] |
|
93 ['LESS' , 'less'] |
|
94 ['Liquid' , 'liquid'] |
|
95 ['Lua' , 'lua'] |
|
96 ['LuaPage' , 'luapage'] |
|
97 ['Markdown' , 'markdown'] |
|
98 ['OCaml' , 'ocaml'] |
|
99 ['Perl' , 'perl'] |
|
100 ['pgSQL' , 'pgsql'] |
|
101 ['PHP' , 'php'] |
|
102 ['Powershell' , 'powershel1'] |
|
103 ['Python' , 'python'] |
|
104 ['R' , 'ruby'] |
|
105 ['OpenSCAD' , 'scad'] |
|
106 ['Scala' , 'scala'] |
|
107 ['SCSS/Sass' , 'scss'] |
|
108 ['SH' , 'sh'] |
|
109 ['SQL' , 'sql'] |
|
110 ['SVG' , 'svg'] |
|
111 ['Tcl' , 'tcl'] |
|
112 ['Text' , 'text'] |
|
113 ['Textile' , 'textile'] |
|
114 ['XML' , 'xml'] |
|
115 ['XQuery' , 'xq'] |
|
116 ['YAML' , 'yaml'] |
|
117 ``` |
|
118 |
|
119 ## theme |
|
120 |
|
121 ``` |
|
122 // Bright themes |
|
123 'chrome' |
|
124 'clouds' |
|
125 'crimson_editor' |
|
126 'dawn' |
|
127 'dreamweaver' |
|
128 'eclipse' |
|
129 'github' |
|
130 'solarized_light' |
|
131 'textmate' // default theme |
|
132 'tomorrow' |
|
133 'xcode' |
|
134 'kuroir' |
|
135 'katzenmilch' |
|
136 ``` |
|
137 |
|
138 ``` |
|
139 // Dark themes |
|
140 'ambiance' |
|
141 'chaos' |
|
142 'clouds_midnight' |
|
143 'cobalt' |
|
144 'idle_fingers' |
|
145 'kr_theme' |
|
146 'merbivore' |
|
147 'merbivore_soft' |
|
148 'mono_industrial' |
|
149 'monokai' |
|
150 'pastel_on_dark' |
|
151 'solarized_dark' |
|
152 'terminal' |
|
153 'tomorrow_night' |
|
154 'tomorrow_night_blue' |
|
155 'tomorrow_night_bright' |
|
156 'tomorrow_night_eighties' |
|
157 'twilight' |
|
158 'vibrant_ink' |
|
159 ``` |
|
160 |
|
161 # Special Thanks |
|
162 |
|
163 * CKEditor : [http://ckeditor.com/](http://ckeditor.com/) |
|
164 * ACE : [http://ace.ajax.org/](http://ace.ajax.org/) |
|
165 * Lea Verou : [http://prismjs.com/](http://prismjs.com/) |
|
166 * Google : [https://code.google.com/p/google-code-prettify/](https://code.google.com/p/google-code-prettify/) |
|
167 * Ivan Sagalaev : [http://highlightjs.org/](http://highlightjs.org/) |
|
168 * Alex Gorbatchev : [http://alexgorbatchev.com/SyntaxHighlighter/](http://alexgorbatchev.com/SyntaxHighlighter/) |
|
169 |
|
170 # Credits |
|
171 #### Pierre Baron |
|
172 Website : [http://www.pierrebaron.fr](http://www.pierrebaron.fr) |
|
173 Twitter : [@prbaron](https://twitter.com/prbaron) |
|
174 Contact : <prbaron22@gmail.com> |