vditor-theme

vditor适配样式开发

样式参考 demo

目录结构

├─editor        # 编辑器样式
└─renderer      # 渲染页面样式

支持的样式

样式名
vscode-dark
vscode-light
dracula

使用方法

参考 index.html

以vscode-dark为例

• 全局引入主题

在head标签插入

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/HerbertHe/vditor-theme@main/editor/vscode-dark.css"
/>

• 引入内容主题

修改options.preview参数

preview: {
    theme: {
        current: "vscode-dark",
        path:
            "https://cdn.jsdelivr.net/gh/HerbertHe/vditor-theme@main/content-theme",
    },
    hljs: {
        style: "solarized-dark256",
    },
},