<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>
  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 }'
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js