<template>
    <prism-editor class="my-editor LTR height-300 " v-model="code" :highlight="highlighter" line-numbers></prism-editor>
</template>

<script>
    // import Prism Editor
    import { PrismEditor } from 'vue-prism-editor';
    import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere

    // import highlighting library (you can use any library you want just return html string)
    import { highlight, languages } from 'prismjs/components/prism-core';
    import 'prismjs/components/prism-clike';
    import 'prismjs/components/prism-javascript';
    import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles

    export default {
        components: {
            PrismEditor,
        },
        data: () => ({ code: 'console.log("Hello World")' }),
        methods: {
            highlighter(code) {
                return highlight(code, languages.js); // languages.<insert language> to return html with markup
            },
        },
    };
</script>

<style>
    .height-300 {
        height: 300px;
    }
    /* required class */
    .my-editor {
        /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
        background: #f5f2f0;
        border: 1px solid #dcdcdc;
        border-left: 10px solid #dcdcdc;
        color: #5a6268;
        border-radius: 5px;

        /* you must provide font-family font-size line-height. Example: */
        font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
        font-size: 14px;
        line-height: 1.5;
        padding: 5px;
    }

    /* optional class for removing the outline */
    .prism-editor__textarea:focus {
        outline: none;
    }
</style>
