Gathering detailed insights and metrics for @toast-ui/editor-plugin-color-syntax
Gathering detailed insights and metrics for @toast-ui/editor-plugin-color-syntax
Gathering detailed insights and metrics for @toast-ui/editor-plugin-color-syntax
Gathering detailed insights and metrics for @toast-ui/editor-plugin-color-syntax
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
npm install @toast-ui/editor-plugin-color-syntax
Typescript
Module System
Node Version
NPM Version
86
Supply Chain
100
Quality
78.1
Maintenance
100
Vulnerability
100
License
TypeScript (85.81%)
CSS (4.99%)
JavaScript (4.96%)
HTML (4.13%)
Vue (0.11%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
17,601 Stars
361 Commits
1,814 Forks
227 Watchers
56 Branches
114 Contributors
Updated on Jul 15, 2025
Latest Version
3.1.0
Package Id
@toast-ui/editor-plugin-color-syntax@3.1.0
Unpacked Size
25.97 kB
Size
7.14 kB
File Count
5
NPM Version
7.24.2
Node Version
16.15.1
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
1
This is a plugin of TOAST UI Editor to color editing text.
- node_modules/
- @toast-ui/
- editor-plugin-color-syntax/
- dist/
- toastui-editor-plugin-color-syntax.js
- toastui-editor-plugin-color-syntax.css
The bundle files include all dependencies of this plugin.
- uicdn.toast.com/
- editor-plugin-color-syntax/
- latest/
- toastui-editor-plugin-color-syntax.js
- toastui-editor-plugin-color-syntax.min.js
- toastui-editor-plugin-color-syntax.css
- toastui-editor-plugin-color-syntax.min.css
To use the plugin, @toast-ui/editor
must be installed.
Ref. Getting Started
1$ npm install @toast-ui/editor-plugin-color-syntax
Along with the plugin, the plugin's dependency style must be imported. The color-syntax
plugin has TOAST UI Color Picker as a dependency, and you need to add a CSS file of TOAST UI Color Picker.
1import 'tui-color-picker/dist/tui-color-picker.css'; 2import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css'; 3 4import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
1require('tui-color-picker/dist/tui-color-picker.css'); 2require('@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css'); 3 4const colorSyntax = require('@toast-ui/editor-plugin-color-syntax');
1// ... 2import 'tui-color-picker/dist/tui-color-picker.css'; 3import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css'; 4 5import Editor from '@toast-ui/editor'; 6import colorSyntax from '@toast-ui/editor-plugin-color-syntax'; 7 8const editor = new Editor({ 9 // ... 10 plugins: [colorSyntax] 11});
To use the plugin, the CDN files(CSS, Script) of @toast-ui/editor
must be included.
1... 2<head> 3 ... 4 <link 5 rel="stylesheet" 6 href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.css" 7 /> 8 <link 9 rel="stylesheet" 10 href="https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.css" 11 /> 12 ... 13</head> 14<body> 15 ... 16 <!-- Color Picker --> 17 <script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.js"></script> 18 <!-- Editor --> 19 <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script> 20 <!-- Editor's Plugin --> 21 <script src="https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.js"></script> 22 ... 23</body> 24...
1const { Editor } = toastui; 2const { colorSyntax } = Editor.plugin; 3 4const editor = new Editor({ 5 // ... 6 plugins: [colorSyntax] 7});
The color-syntax
plugin can set options when used. Just add the plugin function and options related to the plugin to the array([pluginFn, pluginOptions]
) and push them to the plugins
option of the editor.
The following options are available in the color-syntax
plugin.
Name | Type | Default Value | Description |
---|---|---|---|
preset | Array.<string> | Preset for color palette |
1// ... 2import 'tui-color-picker/dist/tui-color-picker.css'; 3import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css'; 4 5import Editor from '@toast-ui/editor'; 6import colorSyntax from '@toast-ui/editor-plugin-color-syntax'; 7 8const colorSyntaxOptions = { 9 preset: ['#181818', '#292929', '#393939'] 10}; 11 12const editor = new Editor({ 13 // ... 14 plugins: [[colorSyntax, colorSyntaxOptions]] 15});
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 4
Details
Reason
Found 9/30 approved changesets -- score normalized to 3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
92 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More