Unable to load codeSyntaxHighlight in Vue 2

Summary

I am unable to load the codeSyntaxHighlight plugin in a Vue 2 project.

Here is a shortened version of the code for the Vue single file component:

<template>
    <div class="note-body">
        <Editor
            :options="options"
            previewStyle="tab"
            ref="bodyEditor"
            height="1000px"
            :initialValue="newBody"
            @change="onEditorChange"
        />
    </div>
</template>

<script>
import '@toast-ui/editor/dist/toastui-editor.css';
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

import {Editor} from '@toast-ui/vue-editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';

export default {
    name: 'NoteBody',
    components: {
        Editor
    },
    data: function() {
        return {
            newBody: '# Example text',
            options: {
                hideModeSwitch: true,
                toolbarItems: [
                    ['quote'],
                    ['task'],
                    ['link'],
                    ['code', 'codeblock']
                ],
                plugins: [codeSyntaxHighlight]
            }
        };
    }
};
</script>

There also is some custom CSS for the component, but commenting it out doesn’t fix the issue.

Here are the relevant dependencies and versions in package.json:

"@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
"@toast-ui/vue-editor": "^3.1.5",
"prismjs": "^1.28.0",
"vue": "^2.6.14",

Version

3.1.5

[nik312123]

Sounds good. Thank you very much for the help! I think this issue can be closed then.

[jwlee1108]

@nik312123

Oh, I’m so sorry. There were lots of tasks to handle on me. I just made the environment by referring to your issue. But, there is no problem. Could you check this link?