如何解决Vue Prism 编辑器 - 设置 tabSize
我目前正在浏览 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。