bytemd添加主题菜单的方法

使用过掘金的同学都应该熟悉bytemd编辑器了吧，这是个开源编辑器，github地址， 默认是没有主题选择的，而掘金的编辑器集成了主题切换功能，如下图。

如何集成自定义主题

• 文件目录
  

1. package.json文件

{
  "name": "@bytemd/plugin-theme",
  "version": "1.17.4",
  "description": "ByteMD plugin to support theme",
  "license": "MIT",
  "author": "xxx",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./locales/*": "./locales/*",
    "./lib/locales/*": "./locales/*"
  },
  "main": "./dist/index.js",
  "jsdelivr": "./dist/index.umd.js",
  "unpkg": "./dist/index.umd.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "files": [
    "dist",
    "locales"
  ],
  "dependencies": {
    "@icon-park/svg": "^1.4.2",
    "@types/mermaid": "^9.1.0",
    "mermaid": "^9.1.7"
  },
  "devDependencies": {
    "bytemd": "1.17.4"
  },
  "peerDependencies": {
    "bytemd": "^1.5.0"
  }
}

2. index.d.ts文件

import type { BytemdPlugin } from 'bytemd';
import type { Config } from 'mermaid';

export declare interface BytemdPluginThemeOptions extends Config {
    locale?: Partial<Locale>;
}

declare type Locale = {
  juejin: string;
  github: string;
  smartblue: string;
  cyanosis: string;
  channingCyan: string;
  fancy: string;
  condensedNightPurple: string;
  greenwillow: string;
  vuePro: string;
  healerReadable: string;
  mkCute: string;
  jzman: string;
  geekBlack: string;
  awesomeGeen: string;
  qklhkChocolate: string;
  orange: string;
  scrollsLight: string;
  simplicityGreen: string;
  arknights: string;
  vuepress: string;
  ChineseRed: string;
  nico: string;
  devuiBlue: string;
  themeid: string;
};

declare function theme({ locale: _locale, ...themeConfig }?: BytemdPluginThemeOptions): BytemdPlugin;
export default theme;
export { }

3. index.mjs文件

import * as icons from "@icon-park/svg";
import zhHans from "src/bytemd/plugin-theme/locales/zh_Hans.json"
import themes from "juejin-markdown-themes";

let m = 'github';
function theme({
  locale: _locale,
  ...themeConfig
} = {}) {
  const locale = { ...zhHans, ..._locale }
  const actionItems = []
  for (const key in locale) {
    actionItems.push({title: key, name: locale[key]})
  }

  return {
    viewerEffect({ file }) {
      if(!!file) {
        changeTheme(m)
      }
    },
    actions: [
      {
        title: '选择主题',
        icon: icons.Theme({theme: "outline"}),
        handler: {
          type: "dropdown",
          actions: actionItems.map(({ title, name }) => ({
            title,
            handler: {
              type: "action",
              click({ editor, appendBlock, codemirror }) {
                m = name
                changeTheme(m)
              }
            }
          })),
          ...locale
        }
      }
    ]
  };
}

/**
 * 修改主题
 * @returns {(function(): void)|*}
 */
function changeTheme(theme) {
  let $rm = document.getElementsByTagName('style')
  for (let i=0;i<$rm.length;i++) {
    if ($rm[i].id.includes('md_')) {
      document.head.removeChild($rm[i])
    }
  }
  const $style = document.createElement('style');
  $style.id = 'md_'+theme
  $style.innerHTML = themes[theme]?.style ?? themes.juejin.style;
  document.head.appendChild($style);
  return () => {
    $style.remove();
  }
}

/**
 * 获取当前主题
 * @returns {string}
 */
function getTheme() {
  return m;
}
export {
  theme as default, changeTheme, getTheme
};

4. zh_Hans.json文件

{
  "juejin": "juejin",
  "github": "github",
  "smartblue": "smartblue",
  "cyanosis": "cyanosis",
  "channingCyan": "channing-cyan",
  "fancy": "fancy",
  "condensedNightPurple": "condensed-night-purple",
  "greenwillow": "greenwillow",
  "vuePro": "vue-pro",
  "healerReadable": "healer-readable",
  "mkCute": "mk-cute",
  "jzman": "jzman",
  "geekBlack": "geek-black",
  "awesomeGeen": "awesome-geen",
  "qklhkChocolate": "qklhk-chocolate",
  "orange": "orange",
  "scrollsLight": "scrolls-light",
  "simplicityGreen": "simplicity-green",
  "arknights": "arknights",
  "vuepress": "vuepress",
  "ChineseRed": "Chinese-red",
  "nico": "nico",
  "devuiBlue": "devui-blue"
}

5. en.json文件，与zh_Hans.json文件一致，这里不贴代码了。

使用

在.vue文件中，导入即可

import {getTheme, changeTheme} from "src/bytemd/plugin-theme/dist/index.mjs";
import theme from "src/bytemd/plugin-theme";
...

效果

大家可以去本人小站去踩踩，可以看以上教程的效果的哇，地址：www.flashinfo,top