Add Prism plugin to TinyMCE on BLUDIT

Bludit is a web application to build your own website or blog and has TinyMCE plugin that you can easy patch to support Prism into it.

Setting up TinyMCE in Bludit

Step 1 - In your Bludit Admin > Plugins > TinyMCE make sure you did activated this plugin.

Step 2 - Go to Bludit Admin > Plugins > TinyMCE and hit settings button.

Step 3 - In the toolbar top textbox, you have to add "codesample" any where you want separated with "|" from other entries.

Step 4 - Under Plugin textbox, you also have to add "codesample" and this is the prism.

Step 5 - Manually edit the file TinyMCE plugin, file located in bludit/bl-plugins/tinymce/plugin.php

             Look for the initialization of tinymce "tinymce.init { ..." and add the following:

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'}
        ]

then hit save and your done at least in setting your TinyMCE.

Installing HTML Code in Bludit

Step 1 - Install HTML Code plugin and make sure you did activated this plugin.

Step 2 - In HTML Code hit settings button.

Step 3 - Enter the following code in the Website > Head and Admin area > Head textbox.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js" integrity="sha256-HWJnMZHGx7U1jmNfxe4yaQedmpo/mtxWSIXvcJkLIf4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-tomorrow.min.css" integrity="sha256-xevuwyBEb2ZYh4nDhj0g3Z/rDBnM569hg9Vq6gEw/Sg=" crossorigin="anonymous" />

You can change the version or theme by using other css from this https://cdnjs.com/libraries/prism.

How to use the Prism plugin

In your TinyMCE toolbar, look for the "{:}" button you added from Step 3 as you set your TinyMCE, hitting that button will launch a new popup window and that is where you enter the snippet code.

Enjoy!