Vue Prism 编辑器 - 设置 tabSize

Question

我目前正在研究 github 页面，但我无法弄清楚如何在我的棱镜编辑器上设置 tabSize 属性，如果有人有任何经验并愿意分享我将不胜感激！

Answer 1

我会在这里回答，因为我已放入代码片段供您使用。 umd 脚本存在问题，无法将 tabSize 识别为有效道具。因此，您可以使用 tab-size 来克服这个问题。

P.S。将选项卡大小移动到 vue 数据的一部分以避免抱怨类型。

这是供您测试的代码片段。

<!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>

Vue Prism 编辑器 - 设置 tabSize

Vue Prism Editor - set tabSize

vue.js

tab-size

vue-prism-editor