Code Sample plugin
Insert and embed syntax highlighted code snippets.
Contribute to this pageThe Code Sample plugin (codesample
) lets a user insert and embed syntax color highlighted code snippets into the editable area. It also adds a button to the toolbar which on click will open a dialog box to accept raw code input.
Basic setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'codesample',
toolbar: 'codesample'
});
By default, codesample
uses http://prismjs.com/
to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.
Note: Prism.js and prism.css need to be added to a page for syntax highlighting to work. See the instructions below to learn how to do this.
Using Prism.js on your web page
You need to add prism.js
and prism.css
to your page in order to get the syntax highlighted code samples on your webpage (as created by the Code Sample plugin). The Code Sample plugin uses the following languages: markup, javascript, css, php, ruby, python, java, c, csharp and cpp. You can generate the prism.js
and prism.css
files on the download page at the Prism website.
Example of using the Prism.js script
<link rel="stylesheet" type="text/css" href="prism.css">
<script src="prism.js"></script>
<pre class="language-markup"><code>...</code></pre>
Interactive example
Options
codesample_global_prismjs
Note: This feature is only available for TinyMCE 5.2 and later.
This configuration option allows a global Prism.js version to be used when highlighting code sample blocks, instead of using the Prism.js version bundled inside the codesample
plugin. This allows for a custom version of Prism.js, including additional languages, to be used.
When using this option, ensure that Prism.js and any language add-ons are loaded on the site, alongside the TinyMCE script:
<script src="prism.js" data-manual></script>
<script src="tinymce.js"></script>
Type: Boolean
Default value: false
Possible values: true
, false
Example: Using codesample_global_prismjs
tinymce.init({
selector: 'textarea',
plugins: 'codesample',
toolbar: 'codesample',
codesample_global_prismjs: true
});
codesample_languages
This configuration option enables you to set a list of languages to be displayed in the languages drop down.
Example: Using codesample_languages
tinymce.init({
selector: 'textarea',
plugins: 'codesample',
codesample_languages: [
{ text: 'HTML/XML', value: 'markup' },
{ text: 'JavaScript', value: 'javascript' },
{ text: 'CSS', value: 'css' },
{ text: 'PHP', value: 'php' },
{ text: 'Ruby', value: 'ruby' },
{ text: 'Python', value: 'python' },
{ text: 'Java', value: 'java' },
{ text: 'C', value: 'c' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' }
],
toolbar: 'codesample'
});
Toolbar buttons
The Code Sample plugin provides the following toolbar buttons:
Toolbar button identifier | Description |
---|---|
codesample | Inserts code snippets with syntax highlighting. |
These toolbar buttons can be added to the editor using:
- The
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
Menu items
The Code Sample plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
codesample | Insert | Inserts code snippets with syntax highlighting. |
These menu items can be added to the editor using:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
Commands
The Code Sample plugin provides the following JavaScript command.
Command | Description |
---|---|
CodeSample | Opens the Code Sample dialog at the cursor position or converts the current selection to a <code> block. |
Example
tinymce.activeEditor.execCommand('CodeSample');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.