Vue Prism Editor - set tabSize

Question

Vue Prism Editor - set tabSize

470 Views Asked by AudioBubble At 26 April 2025 at 04:31

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!

Original Q&A

There are 1 best solutions below

**Mic Fung** · Accepted Answer

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/[email protected].*"></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>

Vue Prism Editor - set tabSize

There are 1 best solutions below

Related Questions in VUE.JS

Related Questions in TAB-SIZE

Related Questions in VUE-PRISM-EDITOR

Trending Questions

Popular # Hahtags

Popular Questions