bytemd-plugin-highlight

bytemd-plugin-highlight

一个bytemd的插件，复刻掘金的样式，给导航栏添加一个图标用于切换代码风格，可以添加一个icon进行切换主题，默认自带了掘金的全部代码风格主题，可以使用其中所有主题，也可以自定义扩展或者删减主题。

Usage

pnpm install bytemd-plugin-highlight

import highLightPlugin from "bytemd-plugin-highlight"

const plugins = [
  highLightPlugin()
]

可以调用 setTheme 手动传入 style str 进行更换样式，也可以通过highlightList查看所有可以使用的主题

如果你想自定义主题或者删减主题，那么你可以导出自带默认的主题，并且删减后按照原格式传回去即可

import { highlightList } from "bytemd-plugin-highlight"
import highLightPlugin from "bytemd-plugin-highlight"

const customList = highlightList  // 自定义删减或者新增自定义的主题

  highLightPlugin({
    highlightList: customList
    cb: changeHighLightCb  // 可以传入一个回调函数，当主题切换的时候会通知回来
  })
]

在Viewer使用的时候，可以通过主题手动设置，下面是一个vue3 Demo。

<template>
  <div class="h-full w-full">
    <Viewer id="v-Editor" :plugins="plugins" :value="code" class="editor" />
  </div>
</template>

<script lang="ts" setup>
import { Viewer } from "@bytemd/vue-next"
import highlightPlugin from "bytemd-plugin-highlight"
import { setTheme } from "bytemd-plugin-highlight"

interface Props {
  code: string
  highlight: string
}
const props = defineProps<Props>()

const plugins = [
highlightPlugin({
    cb: val => {
      console.log("highlightPlugin change cb: ", val)
    }
  })
]

watch(
  () => props.highlight,
  (val: any) => {
    nextTick(() => val && setTheme(val))
  },
  { immediate: true }
)
</script>

Options

属性名	说明	类型	默认
locale	自定义语言	Locale	Zh_cn
highLightList	可供选择的主题数量	HighlightListItem[]	juejin自带的全部
cb	切换主题时候触发的回调	(theme) => {}	-

Event

事件名	说明	类型
setTheme	手动设置主题	(theme: string) => {}
setCustomStyle	手动修改样式	(Stylestr: string) => {}
changeTheme	修改内置主题主题	(theme: highlightItem) => {}