Vue Prism Editor - set tabSize

im currently digging through the github page, but Im unable to figure out how to set the tabSize property on my prism editor, if anyone has any experience and is willing to share it I would greatly appreciate it!

Solution

I will answer here as I placed in code snippet for you to play with. There is a problem on the umd script where it cannot recognise tabSize as a valid props. Therefore, you can use tab-size to overcome this.

P.S. move tab size to be part of vue data to avoid complaining the type.

Here is the code snippet for you to test it.

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism-tomorrow.css" />
    <style>
        .height-200 {
            height: 200px
        }

        .my-editor {
            /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
            background: #2d2d2d;
            color: #ccc;

            /* 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>
</head>

<body>
    <div id="app">
        <prism-editor class="my-editor height-200" v-model="code" :highlight="highlighter" line-numbers :tab-size="tabSize">
        </prism-editor>
    </div>

    <script src="https://unpkg.com/vue@2.6.*"></script>
    <script src="https://unpkg.com/vue-prism-editor"></script>
    <script src="https://unpkg.com/prismjs/prism.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>

    <!-- <script src="./src/index.js"></script> -->
    <script>
        new Vue({
            el: "#app",
            data: () => ({
                code: "code",
                tabSize: 8
            }),
            methods: {
                highlighter(code) {
                    // js highlight example
                    return Prism.highlight(code, Prism.languages.js, "js");
                }
            }
        });

    </script>

</body>

</html>