code highlight in tinymce

 Tue, 13-Jun-2023 03:17:05

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 the download page (https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript) at the Prism website.

 

<link rel="stylesheet" type="text/css" href="prism.css">
<script src="prism.js"></script>
<pre class="language-markup"><code>...</code></pre>

 

codesample_global_prismjs

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>

Example: using codesample_global_prismjs

tinymce.init({
  selector: 'textarea',
  plugins: 'codesample',
  toolbar: 'codesample',
  codesample_global_prismjs: true
});