{"_id":"@drenso-toast-ui/editor-plugin-code-syntax-highlight","_rev":"3-6789b2097794b8fbe71a06d1bd607e42","name":"@drenso-toast-ui/editor-plugin-code-syntax-highlight","dist-tags":{"latest":"3.4.1"},"versions":{"3.1.0":{"name":"@drenso-toast-ui/editor-plugin-code-syntax-highlight","version":"3.1.0","keywords":["nhn","nhn cloud","toast","toastui","toast-ui","editor","plugin","codeblock","highlight"],"author":{"name":"NHN Cloud FE Development Lab","email":"dl_javascript@nhn.com"},"license":"MIT","_id":"@drenso-toast-ui/editor-plugin-code-syntax-highlight@3.1.0","maintainers":[{"name":"bobvandevijver","email":"bobvandevijver@hotmail.com"}],"homepage":"https://ui.toast.com","bugs":{"url":"https://github.com/nhn/tui.editor/issues"},"dist":{"shasum":"1e27e536465fc65f53bc1fadae35c59aba008218","tarball":"https://registry.npmjs.org/@drenso-toast-ui/editor-plugin-code-syntax-highlight/-/editor-plugin-code-syntax-highlight-3.1.0.tgz","fileCount":6,"integrity":"sha512-+tH3LOiG1s8689z34oCTKppdexLZ2pm2jLz62Oj++icueJS8IcR94J3jVKOiKYFMiqceQvG5soZbC0HraHR6LQ==","signatures":[{"sig":"MEYCIQD9P1XLQlg77oUstJsPjCUZH7EpHEZgmbrlXyFXVwHgYwIhAO5DBtY+m0ofvSgX+H0FvPucz6o2f3lZifo2/uBXSkhj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":802658},"main":"dist/toastui-editor-plugin-code-syntax-highlight.js","types":"types/index.d.ts","gitHead":"77fa9c23ff727abcde44748ec1e3dad53ca430d9","scripts":{"lint":"eslint .","test":"jest --watch","build":"webpack build && npm run build:cdn && npm run build:cdn-all && npm run build:all","serve":"snowpack dev","test:ci":"jest","serve:ie":"webpack serve","build:all":"webpack build --env all","build:cdn":"webpack build --env cdn & webpack build --env cdn minify","test:types":"tsc","serve:ie:all":"webpack serve --env all","build:cdn-all":"webpack build --env cdn all & webpack build --env cdn all minify"},"_npmUser":{"name":"bobvandevijver","email":"bobvandevijver@hotmail.com"},"repository":{"url":"git+https://github.com/nhn/tui.editor.git","type":"git","directory":"plugins/code-syntax-highlight"},"_npmVersion":"11.8.0","description":"TOAST UI Editor : Code Syntax Highlight Plugin","directories":{},"_nodeVersion":"24.13.1","browserslist":"last 2 versions, not ie <= 10","dependencies":{"prismjs":"^1.23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^6.0.3","@types/prismjs":"^1.16.3"},"_npmOperationalInternal":{"tmp":"tmp/editor-plugin-code-syntax-highlight_3.1.0_1773332521121_0.9196628937277715","host":"s3://npm-registry-packages-npm-production"}},"3.4.1":{"name":"@drenso-toast-ui/editor-plugin-code-syntax-highlight","version":"3.4.1","keywords":["nhn","nhn cloud","toast","toastui","toast-ui","editor","plugin","codeblock","highlight"],"author":{"name":"NHN Cloud FE Development Lab","email":"dl_javascript@nhn.com"},"license":"MIT","_id":"@drenso-toast-ui/editor-plugin-code-syntax-highlight@3.4.1","maintainers":[{"name":"bobvandevijver","email":"bobvandevijver@hotmail.com"}],"homepage":"https://ui.toast.com","bugs":{"url":"https://github.com/Drenso/tui.editor/issues"},"dist":{"shasum":"0d6e9e23d10994d43568e2039b9763bce86a6e67","tarball":"https://registry.npmjs.org/@drenso-toast-ui/editor-plugin-code-syntax-highlight/-/editor-plugin-code-syntax-highlight-3.4.1.tgz","fileCount":6,"integrity":"sha512-CmCP979lA5le8eDC5hAuslhOyX/yoot7zgkwPcX9FHXulgEDtFwsprZrFWgZZqC5fcuJnEkhD/DCrP2TiJ457g==","signatures":[{"sig":"MEUCIQDcyFsJjIjyahua4/Dx86mURFaS+GzIZz3r2GqQOTUNRAIgWewcPqouAYqUgBs3h18W1Ori27lzBM1V6LOFRO39XhM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drenso-toast-ui%2feditor-plugin-code-syntax-highlight@3.4.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":821187},"main":"dist/toastui-editor-plugin-code-syntax-highlight.js","types":"types/index.d.ts","gitHead":"5236ae0607fb1dac28c0a47bc25c60af1f25730f","scripts":{"lint":"eslint .","test":"jest --watch","build":"webpack build && npm run build:cdn && npm run build:cdn-all && npm run build:all","serve":"webpack serve","test:ci":"jest","build:all":"webpack build --env all","build:cdn":"webpack build --env cdn & webpack build --env cdn minify","serve:all":"webpack serve --env all","test:types":"tsc","build:cdn-all":"webpack build --env cdn all & webpack build --env cdn all minify"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:5b8292bd-c996-4028-8dda-1202da33d551"}},"repository":{"url":"git+https://github.com/Drenso/tui.editor.git","type":"git","directory":"plugins/code-syntax-highlight"},"_npmVersion":"11.9.0","description":"TOAST UI Editor : Code Syntax Highlight Plugin","directories":{},"_nodeVersion":"24.14.0","browserslist":"last 2 versions, not ie <= 10","dependencies":{"prismjs":"^1.23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^6.0.3","@types/prismjs":"^1.16.3"},"_npmOperationalInternal":{"tmp":"tmp/editor-plugin-code-syntax-highlight_3.4.1_1773337758408_0.022925236289969453","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-03-12T16:22:01.062Z","modified":"2026-03-13T04:06:59.466Z","3.1.0":"2026-03-12T16:22:01.321Z","3.4.1":"2026-03-12T17:49:18.605Z"},"bugs":{"url":"https://github.com/Drenso/tui.editor/issues"},"author":{"name":"NHN Cloud FE Development Lab","email":"dl_javascript@nhn.com"},"license":"MIT","homepage":"https://ui.toast.com","keywords":["nhn","nhn cloud","toast","toastui","toast-ui","editor","plugin","codeblock","highlight"],"repository":{"url":"git+https://github.com/Drenso/tui.editor.git","type":"git","directory":"plugins/code-syntax-highlight"},"description":"TOAST UI Editor : Code Syntax Highlight Plugin","maintainers":[{"email":"bobvandevijver@hotmail.com","name":"bobvandevijver"},{"email":"tobias93@live.nl","name":"tobiasfeijten"}],"readme":"# TOAST UI Editor : Code Syntax Highlight Plugin\n\n> This is a plugin of [TOAST UI Editor](https://github.com/Drenso/tui.editor/tree/master/apps/editor) to highlight code syntax.\n\n[](https://www.npmjs.com/package/@drenso-toast-ui/editor-plugin-code-syntax-highlight)\n\n\n\n## 🚩 Table of Contents\n\n- [Bundle File Structure](#-bundle-file-structure)\n- [Usage npm](#-usage-npm)\n- [Usage CDN](#-usage-cdn)\n\n## 📁 Bundle File Structure\n\n### Serve with npm\n\n### Files Distributed on npm\n\n```\n- node_modules/\n - @drenso-toast-ui/\n - editor-plugin-code-syntax-highlight/\n - dist/\n - toastui-editor-plugin-code-syntax-highlight-all.js\n - toastui-editor-plugin-code-syntax-highlight.js\n - toastui-editor-plugin-code-syntax-highlight.css\n```\n\n### Files Distributed on CDN\n\n```\n- uicdn.toast.com/\n - editor-plugin-code-syntax-highlight/\n - latest/\n - toastui-editor-plugin-code-syntax-highlight.js\n - toastui-editor-plugin-code-syntax-highlight.min.js\n - toastui-editor-plugin-code-syntax-highlight-all.js\n - toastui-editor-plugin-code-syntax-highlight-all.min.js\n - toastui-editor-plugin-code-syntax-highlight.css\n - toastui-editor-plugin-code-syntax-highlight.min.css\n```\n\n## 📦 Usage npm\n\nTo use the plugin, [`@drenso-toast-ui/editor`](https://github.com/Drenso/tui.editor/tree/master/apps/editor) must be installed.\n\n> Ref. [Getting Started](https://github.com/Drenso/tui.editor/blob/master/docs/en/getting-started.md)\n\n### Install\n\n```sh\n$ npm install @drenso-toast-ui/editor-plugin-code-syntax-highlight\n```\n\n### Import Plugin\n\nAlong with the plugin, the plugin's dependency style must be imported. \nThe `code-syntax-highlight` plugin has [`prismjs`](https://prismjs.com/) as a dependency, and you need to add a CSS file of `prismjs`.\n\n#### ES Modules\n\n```js\nimport 'prismjs/themes/prism.css';\nimport '@drenso-toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';\n\nimport codeSyntaxHighlight from '@drenso-toast-ui/editor-plugin-code-syntax-highlight';\n```\n\n#### CommonJS\n\n```js\nrequire('prismjs/themes/prism.css');\nrequire('@drenso-toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css');\n\nconst codeSyntaxHighlight = require('@drenso-toast-ui/editor-plugin-code-syntax-highlight');\n```\n\n### Create Instance\n\nWhen you set up a plugin function, you must set it with an option. The option has `highlighter`, and you need to import [`prismjs`](https://www.npmjs.com/package/prismjs) before creating an instance and set it to the value of that option.\n\nThe 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`.\n\n#### Basic\n\n##### Import All Languages\n\n```js\n// ...\nimport 'prismjs/themes/prism.css';\nimport '@drenso-toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';\n\nimport Editor from '@drenso-toast-ui/editor';\nimport codeSyntaxHighlight from '@drenso-toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';\n\n\nconst editor = new Editor({\n // ...\n plugins: [codeSyntaxHighlight]\n});\n```\n\n##### Import Only Languages You Need\n\nYou 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](https://github.com/PrismJS/prism/tree/master/components).\n\n```js\n// ...\nimport 'prismjs/themes/prism.css';\nimport '@drenso-toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';\n\n// Step 1. Import prismjs\nimport Prism from 'prismjs';\n\n// Step 2. Import language files of prismjs that you need\nimport 'prismjs/components/prism-clojure.js';\n\nimport Editor from '@drenso-toast-ui/editor';\nimport codeSyntaxHighlight from '@drenso-toast-ui/editor-plugin-code-syntax-highlight';\n\nconst editor = new Editor({\n // ...\n plugins: [[codeSyntaxHighlight, { highlighter: Prism }]]\n});\n```\n\n#### With Viewer\n\nAs with creating an editor instance, you need to import `prismjs` and pass it to the `highlighter` option.\n\n```js\n// ...\nimport 'prismjs/themes/prism.css';\nimport '@drenso-toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';\n\n// Import prismjs\nimport Prism from 'prismjs';\n\nimport Viewer from '@drenso-toast-ui/editor/dist/toastui-editor-viewer';\nimport codeSyntaxHighlight from '@drenso-toast-ui/editor-plugin-code-syntax-highlight';\n\n\nconst viewer = new Viewer({\n // ...\n plugins: [[codeSyntaxHighlight, { highlighter: Prism }]]\n});\n```\n\nor\n\n```js\n// ...\nimport 'prismjs/themes/prism.css';\nimport '@drenso-toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';\n\n// Import prismjs\nimport Prism from 'prismjs';\n\nimport Editor from '@drenso-toast-ui/editor';\nimport codeSyntaxHighlight from '@drenso-toast-ui/editor-plugin-code-syntax-highlight';\n\nconst viewer = Editor.factory({\n // ...\n viewer: true,\n plugins: [[codeSyntaxHighlight, { highlighter: Prism }]]\n});\n```\n\n## 🗂 Usage CDN\n\n### Include Files\n\nTo use the plugin, the CDN files(CSS, Script) of `@drenso-toast-ui/editor` must be included.\n\n### Create Instance\n\n#### Basic\n\nFirst, 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_).\n\n##### Include All Languages\n\nBy including the **all** version of the plugin, all languages of `prismjs` are available in the code block.\n\n```html\n...\n\n ...\n \n \n ...\n\n\n ...\n \n \n \n \n ...\n\n...\n```\n\n```js\nconst { Editor } = toastui;\nconst { codeSyntaxHighlight } = Editor.plugin;\n\nconst instance = new Editor({\n // ...\n plugins: [codeSyntaxHighlight]\n});\n```\n\n##### Include Only Languages You Need\n\nIf 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.\n\n> Note : The CDN provided by `prismjs` contains several language files. If you want to add other language files, you can use [cdnjs](https://cdnjs.com/libraries/prism) to add each language file or upload a file containing only the language you need on [this page](https://prismjs.com/download.html).\n\n```html\n...\n\n ...\n \n \n ...\n\n\n ...\n \n \n \n \n \n \n \n ...\n\n...\n```\n\n#### With Viewer\n\nThe way to include the plugin and the language files of `prismjs` is the same as above.\n\n##### Use Option of Editor\n\n```js\nconst { Editor } = tosatui;\nconst { codeSyntaxHighlight } = Editor.plugin;\n\nconst editor = Editor.factory({\n // ...\n plugins: [codeSyntaxHighlight],\n viewer: true\n});\n```\n\n##### Use Viewer\n\nInclude the Viewer file instead of the Editor.\n\n```html\n...\n\n ...\n \n \n ...\n\n\n ...\n \n \n \n \n ...\n\n...\n```\n\n```js\nconst Viewer = toastui.Editor;\nconst { codeSyntaxHighlight } = Viewer.plugin;\n\nconst viewer = new Viewer({\n // ...\n plugins: [codeSyntaxHighlight]\n});\n```\n","readmeFilename":"README.md"}