You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
2.3 KiB
58 lines
2.3 KiB
= Code Sample plugin
|
|
:navtitle: Code Sample
|
|
:description: Insert and embed syntax highlighted code snippets.
|
|
:keywords: syntax, highlight, codesample, code, contenteditable, codesample_global_prismjs, codesample_languages
|
|
:pluginname: Code Sample
|
|
:plugincode: codesample
|
|
|
|
The 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
|
|
|
|
[source,js]
|
|
----
|
|
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-prismjs-on-your-web-page]]
|
|
== 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 http://prismjs.com/download.html[download] page at the Prism website.
|
|
|
|
[[example-of-using-the-prismjs-script]]
|
|
=== Example of using the Prism.js script
|
|
|
|
[source,html]
|
|
----
|
|
<link rel="stylesheet" type="text/css" href="prism.css">
|
|
<script src="prism.js"></script>
|
|
<pre class="language-markup"><code>...</code></pre>
|
|
----
|
|
|
|
== Interactive example
|
|
|
|
liveDemo::codesample[]
|
|
|
|
== Options
|
|
|
|
include::partial$configuration/codesample_global_prismjs.adoc[leveloffset=+1]
|
|
|
|
include::partial$configuration/codesample_languages.adoc[leveloffset=+1]
|
|
|
|
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]
|
|
|
|
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]
|
|
|
|
== Commands
|
|
|
|
The Code Sample plugin provides the following {productname} command.
|
|
|
|
include::partial$commands/codesample-cmds.adoc[]
|