<textarea id="codesample">
<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
<h2 style="text-align: center;">TinyMCE Code Sample Plugin</h2>
<p style="text-align: center;">Code Sample automatically applies color highlighting to PRE and CODE elements. Highlight some text, click the Code Sample button to see `code` applied to the text.</p>
<h3 style="text-align: center;">How to insert a snippet</h3>
<p style="text-align: center;">To create a snippet, insert the cursor on a new/empty line and click the Code Sample button in the toolbar. Add a code snippet to the modal, select the language and click OK to add the snippet to the page.</p>
<p style="text-align: center">Note: this demo includes the Code plugin, which enables a <strong>code view</strong>. You can use this to see how Code Sample changes the HTML in the editable area.</p>
</textarea>
tinymce.init({
selector: 'textarea#codesample',
height: 500,
plugins: 'codesample code',
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 code',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
External CSS
This Pen doesn't use any external CSS resources.