How to apply 'code-syntax-highlight' plugin to 'vue-editor'?

JeongEEE commented 3 years ago

Hello!

I am using '@toast-ui/vue-editor' for my project

here is my code.

<template>
  <Editor
    :initialValue="editorText"
    :options="editorOptions"
    height="65vh"
    initialEditType="wysiwyg"
    previewStyle="vertical"
    ref="markdownEditText"
  />
</template>

<script>
import '@toast-ui/editor/dist/i18n/ko-kr';
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/vue-editor';
const DEFAULT_OPTION = {
  minHeight: '200px',
  language: 'ko-KR',
  useCommandShortcut: true,
  useDefaultHTMLSanitizer: true,
  usageStatistics: true,
  hideModeSwitch: true,
  toolbarItems: [
      'heading', 'bold', 'italic', 'strike', 'divider',
      'hr', 'quote', 'divider',
      'ul', 'ol', 'task', 'indent', 'outdent', 'divider',
      'table', 'image', 'link', 'divider',
      'code', 'codeblock'
   ]
};
export default {
   components: {
      Editor
   },
   data: () => ({
      editorText: '',
      editorOptions: DEFAULT_OPTION,
   }),

.....

}
</script>

js87zz commented 3 years ago

@JeongEEE Can you try as below?

<script>
import '@toast-ui/editor/dist/i18n/ko-kr';
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/vue-editor';

// add dependencies related code-syntax-highlight
import 'highlight.js/styles/github.css';
import hljs from 'highlight.js';

import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';

const DEFAULT_OPTION = {
  minHeight: '200px',
  // ...
  plugins: [[codeSyntaxHighlight, { hljs }]]
};
export default {
   components: {
      Editor
   },
   data: () => ({
      editorText: '',
      editorOptions: DEFAULT_OPTION,
   }),

.....

}
</script>

JeongEEE commented 3 years ago

@js87zz Yes!. I did as you said, but I get the following error.

Toast UI Editor is a great editor. I definitely want to use 'code-syntax-highlight'. Please help! T.T

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'addEventType' of undefined" found in ---> at src/Editor.vue .....

TypeError: Cannot read property 'addEventType' of undefined at codeSyntaxHighlightPlugin (webpack-internal:///./node_modules/@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.js:1252) at eval (webpack-internal:///./node_modules/@toast-ui/editor/dist/toastui-editor.js:3824) at Array.forEach () at invokePlugins (webpack-internal:///./node_modules/@toast-ui/editor/dist/toastui-editor.js:3817) at new ToastUIEditor (webpack-internal:///./node_modules/@toast-ui/editor/dist/toastui-editor.js:28606) at VueComponent.mounted (webpack-internal:///./node_modules/@toast-ui/vue-editor/dist/toastui-vue-editor.js:7) at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853) at callHook (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4213) at Object.insert (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3136) at invokeInsertHook (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6336)

js87zz commented 3 years ago

@JeongEEE What is your plugin and editor version? If editor version is 2.x, you should use the 1.0.0 version of code-syntax-highlight plugin.

JeongEEE commented 3 years ago

@js87zz Wow. The error is gone. Thanks!!

 "@toast-ui/editor-plugin-code-syntax-highlight": "1.0.0",
 "@toast-ui/vue-editor": "2.5.2",

However, the following issues arise. Have you ever seen issues like this?

Deprecated as of 10.7.0. highlight(lang, code, ...args) has been deprecated.

Deprecated as of 10.7.0. Please use highlight(code, options) instead.
https://github.com/highlightjs/highlight.js/issues/2277

js87zz commented 3 years ago

@JeongEEE Our plugin should operate with v9.18.1 version of the highlight.js. Can you check it?

nhn / tui.editor

How to apply 'code-syntax-highlight' plugin to 'vue-editor'? #1563