问题描述
我目前正在浏览 github 页面,但我无法弄清楚如何在我的棱镜编辑器上设置 tabSize 属性,如果有人有任何经验并愿意分享它,我将不胜感激!
解决方法
我会在这里回答,因为我放置了代码片段供您使用。
umd 脚本存在一个问题,它无法将 tabSize
识别为有效的道具。
因此,您可以使用 tab-size
来解决这个问题。
附言将标签大小移动到 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>