Code Snippet Plugin

Options
Methods
Events
Dependencies

Plugins are fully functional during your trial once you've added your trial key to the setup.

Insert and display code snippets with syntax highlighting. Supports JavaScript, TypeScript, Python, HTML, CSS, Java, C++, SQL, and JSON out of the box, with Prism.js powering the highlighting.

Plugin options:

codeSnippetLanguage Object	Defines the available programming languages in the code snippet modal. Default: { 'JavaScript': 'javascript', 'TypeScript': 'typescript', 'Python': 'python', 'HTML': 'html', 'CSS': 'css', 'Java': 'java', 'C++': 'cpp', 'SQL': 'sql', 'JSON': 'json' }
codeSnippetDefaultLanguage String	Sets the default language selected when opening the code snippet modal. Default: 'JavaScript'

Plugin methods:

codeSnippet.insert(code, language, replaceEl)	Inserts a new code snippet into the editor. ● code (string): The code content to insert ● language (string): The programming language (must match a key from codeSnippetLanguage) ● replaceEl (DOM Object): Element to be replaced with the code snippet element.
codeSnippet.update($codeBlock, code, language)	Updates an existing code snippet block. ● $codeBlock (DOM Object): The code snippet block element to update ● code (string): The new code content ● language (string): The new programming language
codeSnippet.show (isEdit)	Shows the code snippet modal for inserting or editing code. ● isEdit (boolean, optional): If `true`, opens the modal in edit mode. Default: `false`

Plugin events:

codeSnippet.beforeInsert (code)	Triggered before a code snippet is inserted into the editor. You can modify the code or cancel the insertion. ● code (string): The code content to be inserted. Return: ● string: Modified code content to insert ● false: Cancel the insertion
codeSnippet.afterInsert (html)	Triggered after a code snippet has been successfully inserted into the editor. ● html (string): The complete HTML of the inserted code snippet block

Dependencies

Required: This plugin requires Prism.js to be loaded on the page for syntax highlighting to work.

For client-side conversion (when importFromWordUrlToUpload is null), the plugin requires Mammoth.js to be loaded on the page:

  <!-- Include Prism CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
  
  <!-- Include Prism JS -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>
  <!-- Add more language components as needed -->

Add Plugin to your code:

Plugin name: codeSnippet

Plugin JS Script: ../js/plugins/code_snippet.min.js

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/code_snippet.min.js

Plugin CSS link: ../css/plugins/code_snippet.min.css

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/code_snippet.min.css