Paste Code Sample Plugin

This plugin facilitates the insertion and embedding of syntax-highlighted code snippets.

The Paste Code Sample (pasteCode) plugin empowers users to paste and embed syntax-highlighted code snippets into an editable area.

Moreover, it incorporates a button into the toolbar. Upon clicking this button, a dialog box appears for inputting raw code.

Installation:

Add "pasteCode" to your Jodit's extraPlugins variable

Jodit.make('#editor', {
	extraPlugins: ['pasteCode']
});
Copy

Options

globalHighlightLib

• Type: Boolean
• Default: false

This config option allows you to use the global version of Prism.js(or another highlight library) when highlighting code sample blocks, instead of using the Prism.js version built into the paste-code plugin. This allows a special version of Prism.js to be used, including additional languages.

When using this option, make sure that Prism.js and any language add-ons are loaded to the site along with the Jodit script:

<textarea id="editor"></textarea>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"
	data-manual
></script>
<script>
	Jodit.make('#editor', {
		pasteCode: {
			globalHighlightLib: true
		}
	});
</script>
Copy

highlightLib

• Type:

interface highlightLib {
	highlight: (code: string, language: string) => string;
	isLangLoaded: (lang: string) => boolean;
	langUrl: (lang: string) => string;
	beforeLibLoad?: () => CanPromise<void>;
	afterLibLoad?: () => CanPromise<void>;
	js: string[];
	css: string[];
}
Copy

• Default:

const highlightLib = {
	beforeLibLoad(): void {
		window.Prism = window.Prism || {};
		window.Prism.manual = true;
	},
	js: [
		'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
		'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js'
	],

	isLangLoaded(lang) {
		if (lang === 'html') {
			return true;
		}
		return typeof Prism !== 'undefined' ? Boolean(Prism.languages[lang]) : false;
	},

	langUrl: (lang) =>
		`https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${lang}.min.js`,

	css: [
		'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'
	],

	highlight: (code, language) => {
		return typeof Prism !== 'undefined'
			? Prism.highlight(
					code,
					Prism.languages[language] || Prism.languages.plain,
					language
			  )
			: htmlspecialchars(code);
	}
};
Copy

In contrast to globalHighlightLib, the Jodit editor itself includes the styles and scripts of prism.js( or another lib.).

highlightLib.js

• Type: String[]
• Default:

[
	'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
	'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js'
]
Copy

The js field lists the scripts that need to be loaded for syntax highlighting. You can specify multiple languages here.

For example:

Jodit.make('#editor', {
	pasteCode: {
		highlightLib: {
			js: [
				'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
				'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-csv.min.js'
			]
		}
	}
});
Copy

highlightLib.css

• Type: String[]
• Default: ['https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css']

The css field lists the styles that need to be loaded for syntax highlighting. You can specify a different theme here.

For example:

Jodit.make('#editor', {
	pasteCode: {
		highlightLib: {
			css: [
				'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css'
			]
		}
	}
});
Copy

highlightLib.beforeLibLoad

• Type: Function
• Default:

function beforeLibLoad() {
	window.Prism = window.Prism || {};
	window.Prism.manual = true;
}
Copy

This optional method is called before the syntax highlighting library is loaded. You can use it to set up any global variables or configurations needed by the library.

highlightLib.afterLibLoad

• Type: Function
• Default: undefined

This optional method is called after the syntax highlighting library is loaded. You can use it to perform any additional setup or configuration after the library is available.

highlightLib.langUrl

• Type: Function
• Default:

function langUrl(lang: string): string {
	return `https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${lang}.min.js`;
}
Copy

The Prism.JS(or another lib) init script only highlights a limited number of languages. If a language is selected that has not yet been loaded, Jodit will find it from the URL that this function generates.

For example:

Jodit.make('#editor', {
	pasteCode: {
		highlightLib: {
			langUrl: (lang) =>
				`https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${lang}.js`
		}
	}
});
Copy

highlightLib.isLangLoaded

• Type: Function
• Default:

function isLangLoaded(lang) {
	if (lang === 'html') {
		return true;
	}
	return typeof Prism !== 'undefined' ? Boolean(Prism.languages[lang]) : false;
}
Copy

Determines whether the language handler needs to be loaded, or it has already been loaded earlier

highlightLib.highlight

• Type: Function
• Default:

function highlight(code, language) {
	return typeof Prism !== 'undefined'
		? Prism.highlight(
				code,
				Prism.languages[language] || Prism.languages.plain,
				language
		  )
		: htmlspecialchars(code);
}
Copy

The primary method of the syntax highlighting library generates a string where language tokens are replaced with span blocks. This method can be substituted with another one. It is the only method where the call to the highlighting library is defined.

As such, you can utilize a different library with this plugin. For instance, let's use another popular syntax highlighting highlight.js

Jodit.make('#editor', {
	pasteCode: {
		insertTemplate: (jodit, language, value) =>
			`<pre><code class="hljs language-${language}">${Jodit.modules.Helpers.htmlspecialchars(value)}</code></pre>`,

		highlightLib: {
			js: [
				'//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'
			],

			isLangLoaded(lang) {
				if (lang === 'html') {
					return true;
				}
				return Boolean(hljs.listLanguages()[lang]);
			},

			langUrl: (lang) =>
				`//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/${lang}.min.js`,

			css: [
				'//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css',
			],

			highlight: (code, language) => {
				return hljs.highlight(code, { language: language }).value;
			}
		}
	}
});
Copy

defaultLanguage

• Type: String

• Default: 'html'

• Specifies the default language in which the code editor will open.

canonicalLanguageCode

• Type:

function canonicalLanguageCode(lang: string): string {
	...
}
Copy

• Default:

function canonicalLanguageCode(lang: string): string {
	switch (lang) {
		case 'ts':
			return 'typescript';

		case 'js':
			return 'javascript';

		case 'markup':
			return 'html';
	}
	return lang;
}
Copy

Specifies the canonical names of languages

insertTemplate

• Type: Function
• Default:

function (jodit: IJodit, language: string, value: string) {
	return `<pre class="language-${language}">${Jodit.modules.Helpers.htmlspecialchars(
		value
	)}</pre>`
}
Copy

• Signature:

interface insertTemplate {
	(
    jodit: IJodit,
    language: string,
    value: string
  ) => string;
}
Copy

Enables you to define a function that generates the string to be inserted.

languages

• Type: Array<{value: string, text: string}>
• Default:

[
	{ value: 'plaintext', text: 'Plain' },
	{ value: 'html', text: 'HTML/XML' },
	{ value: 'bash', text: 'Bash' },
	{ value: 'php', text: 'PHP' },
	{ value: 'javascript', text: 'JavaScript' },
	{ value: 'typescript', text: 'TypeScript' },
	{ value: 'jsx', text: 'JSX' },
	{ value: 'java', text: 'Java' },
	{ value: 'css', text: 'CSS' },
	{ value: 'php', text: 'PHP' },
	{ value: 'ruby', text: 'Ruby' },
	{ value: 'python', text: 'Python' },
	{ value: 'java', text: 'Java' },
	{ value: 'c', text: 'C' },
	{ value: 'csharp', text: 'C#' },
	{ value: 'cpp', text: 'C++' },
	{ value: 'sql', text: 'SQL' },
	{ value: 'docker', text: 'Docker' },
	{ value: 'http', text: 'HTTP' },
	{ value: 'ini', text: 'INI' },
	{ value: 'yaml', text: 'YAML' },
	{ value: 'json', text: 'JSON' },
	{ value: 'json5', text: 'JSON5' },
	{ value: 'makefile', text: 'Makefile' },
	{ value: 'swift', text: 'Swift' }
];
Copy

This configuration option allows you to specify a list of languages that will be displayed in the language dropdown menu.

dialog

• Type: Object
• Default:

{
    width: 700,
    height: 600
}
Copy

Allows setting the size of the dialog.

dialog.width

• Type: number
• Default: 700

The width of the dialog in pixels.

dialog.height

• Type: number
• Default: 600

The height of the dialog in pixels.

Example

Jodit.make('#editor', {
	pasteCode: {
		defaultLanguage: 'js',

		languages: Jodit.atom([
			{ value: 'js', text: 'JS' },
			{ value: 'css', text: 'CSS' }
		]),

		insertTemplate: (_, lang, value) => `<code>${value}</code>`,

		dialog: {
			width: 1000
		}
	}
});
Copy