> This is a fork of the Toast UI Editor maintained by @licium.
> Original repository: https://github.com/natorus87/tui.editor

TOAST UI Editor : Code Syntax Highlight Plugin

> This is a plugin of TOAST UI Editor to highlight code syntax.

![npm version](https://www.npmjs.com/package/@licium/editor-plugin-code-syntax-highlight)

!code-syntax-highlight

🚩 Table of Contents

- Bundle File Structure
- Usage npm
- Usage CDN

📁 Bundle File Structure

$3

``- node_modules/ - @toast-ui/ - editor-plugin-code-syntax-highlight/ - dist/ - toastui-editor-plugin-code-syntax-highlight-all.js - toastui-editor-plugin-code-syntax-highlight.js - toastui-editor-plugin-code-syntax-highlight.css`

`$3`

`- uicdn.toast.com/ - editor-plugin-code-syntax-highlight/ - latest/ - toastui-editor-plugin-code-syntax-highlight.js - toastui-editor-plugin-code-syntax-highlight.min.js - toastui-editor-plugin-code-syntax-highlight-all.js - toastui-editor-plugin-code-syntax-highlight-all.min.js - toastui-editor-plugin-code-syntax-highlight.css - toastui-editor-plugin-code-syntax-highlight.min.css`

`📦 Usage npm`

To use the plugin, @licium/editor must be installed.

> Ref. Getting Started

`$3`

`sh $ npm install @licium/editor-plugin-code-syntax-highlight`

`$3`

Along with the plugin, the plugin's dependency style must be imported. Thecode-syntax-highlight plugin has prismjs as a dependency, and you need to add a CSS file of prismjs.

#### ES Modules

`js import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight';`

#### CommonJS

`js require('prismjs/themes/prism.css'); require('@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css');

const codeSyntaxHighlight = require('@licium/editor-plugin-code-syntax-highlight');`

`$3`

When you set up a plugin function, you must set it with an option. The option has highlighter, and you need to import prismjs before creating an instance and set it to the value of that option.

The main bundle file of prismjs contains just several language pack it supports. So we provides the bundle file(toastui-editor-plugin-code-syntax-highlight-all.js) to import all languages you need in prismjs.

#### Basic

##### Import All Languages

`js // ... import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

import Editor from '@licium/editor'; import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';

const editor = new Editor({ // ... plugins: [codeSyntaxHighlight] });`

##### Import Only Languages You Need

You need to import the language files you want to use in the code block and register them in the prismjs object. A list of available language files can be found here.

`js // ... import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

// Step 1. Import prismjs import Prism from 'prismjs';

// Step 2. Import language files of prismjs that you need import 'prismjs/components/prism-clojure.js';

import Editor from '@licium/editor'; import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight';

const editor = new Editor({ // ... plugins: [[codeSyntaxHighlight, { highlighter: Prism }]] });`

#### With Viewer

As with creating an editor instance, you need to import prismjs and pass it to the highlighter option.

`js // ... import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

// Import prismjs import Prism from 'prismjs';

import Viewer from '@licium/editor/dist/toastui-editor-viewer'; import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight';

const viewer = new Viewer({ // ... plugins: [[codeSyntaxHighlight, { highlighter: Prism }]] });`

or

`js // ... import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

// Import prismjs import Prism from 'prismjs';

import Editor from '@licium/editor'; import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight';

const viewer = Editor.factory({ // ... viewer: true, plugins: [[codeSyntaxHighlight, { highlighter: Prism }]] });`

`🗂 Usage CDN`

`$3`

To use the plugin, the CDN files(CSS, Script) of @licium/editor must be included.

`$3`

#### Basic

First, include the editor file. And include the plugin file as needed. If you want to include all language files provided by prismjs, see the first title(_Include All Languages_). If you want to register and use only the languages you need, see the second title(_Include Only Languages You Need_).

##### Include All Languages

By including the all version of the plugin, all languages of prismjs are available in the code block.

`html ... ... rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" /> rel="stylesheet" href="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight.min.css" /> ... ... ... ...`

`js const { Editor } = toastui; const { codeSyntaxHighlight } = Editor.plugin;

const instance = new Editor({ // ... plugins: [codeSyntaxHighlight] });`

##### Include Only Languages You Need

If you include the normal version of the plugin, only the languages you need are available. At this time, you should also include the language files of prismjs, and if you only include it, the languages available to the plugin are registered.

> Note : The CDN provided by prismjs contains several language files. If you want to add other language files, you can use cdnjs to add each language file or upload a file containing only the language you need on this page.

#### With Viewer

The way to include the plugin and the language files of prismjs is the same as above.

##### Use Option of Editor

`js const { Editor } = tosatui; const { codeSyntaxHighlight } = Editor.plugin;

const editor = Editor.factory({ // ... plugins: [codeSyntaxHighlight], viewer: true });`

##### Use Viewer

Include the Viewer file instead of the Editor.

`js const Viewer = toastui.Editor; const { codeSyntaxHighlight } = Viewer.plugin;

const viewer = new Viewer({ // ... plugins: [codeSyntaxHighlight] });``

> This is a fork of the Toast UI Editor maintained by @licium.
> Original repository: https://github.com/natorus87/tui.editor

TOAST UI Editor : Code Syntax Highlight Plugin

> This is a plugin of TOAST UI Editor to highlight code syntax.

![npm version](https://www.npmjs.com/package/@licium/editor-plugin-code-syntax-highlight)

!code-syntax-highlight

🚩 Table of Contents

- Bundle File Structure
- Usage npm
- Usage CDN

📁 Bundle File Structure

$3

`$3`

`📦 Usage npm`

To use the plugin, @licium/editor must be installed.

> Ref. Getting Started

`$3`

`sh $ npm install @licium/editor-plugin-code-syntax-highlight`

`$3`

Along with the plugin, the plugin's dependency style must be imported. Thecode-syntax-highlight plugin has prismjs as a dependency, and you need to add a CSS file of prismjs.

#### ES Modules

`js import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight';`

#### CommonJS

`js require('prismjs/themes/prism.css'); require('@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css');

const codeSyntaxHighlight = require('@licium/editor-plugin-code-syntax-highlight');`

`$3`

When you set up a plugin function, you must set it with an option. The option has highlighter, and you need to import prismjs before creating an instance and set it to the value of that option.

#### Basic

##### Import All Languages

`js // ... import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

import Editor from '@licium/editor'; import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';

const editor = new Editor({ // ... plugins: [codeSyntaxHighlight] });`

##### Import Only Languages You Need

You need to import the language files you want to use in the code block and register them in the prismjs object. A list of available language files can be found here.

`js // ... import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

// Step 1. Import prismjs import Prism from 'prismjs';

// Step 2. Import language files of prismjs that you need import 'prismjs/components/prism-clojure.js';

import Editor from '@licium/editor'; import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight';

const editor = new Editor({ // ... plugins: [[codeSyntaxHighlight, { highlighter: Prism }]] });`

#### With Viewer

As with creating an editor instance, you need to import prismjs and pass it to the highlighter option.

`js // ... import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

// Import prismjs import Prism from 'prismjs';

import Viewer from '@licium/editor/dist/toastui-editor-viewer'; import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight';

const viewer = new Viewer({ // ... plugins: [[codeSyntaxHighlight, { highlighter: Prism }]] });`

or

`js // ... import 'prismjs/themes/prism.css'; import '@licium/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

// Import prismjs import Prism from 'prismjs';

import Editor from '@licium/editor'; import codeSyntaxHighlight from '@licium/editor-plugin-code-syntax-highlight';

const viewer = Editor.factory({ // ... viewer: true, plugins: [[codeSyntaxHighlight, { highlighter: Prism }]] });`

`🗂 Usage CDN`

`$3`

To use the plugin, the CDN files(CSS, Script) of @licium/editor must be included.

`$3`

#### Basic

##### Include All Languages

By including the all version of the plugin, all languages of prismjs are available in the code block.

`js const { Editor } = toastui; const { codeSyntaxHighlight } = Editor.plugin;

const instance = new Editor({ // ... plugins: [codeSyntaxHighlight] });`

##### Include Only Languages You Need

#### With Viewer

The way to include the plugin and the language files of prismjs is the same as above.

##### Use Option of Editor

`js const { Editor } = tosatui; const { codeSyntaxHighlight } = Editor.plugin;

const editor = Editor.factory({ // ... plugins: [codeSyntaxHighlight], viewer: true });`

##### Use Viewer

Include the Viewer file instead of the Editor.

`js const Viewer = toastui.Editor; const { codeSyntaxHighlight } = Viewer.plugin;

const viewer = new Viewer({ // ... plugins: [codeSyntaxHighlight] });``