插件源码分析

markdown-it-multimd-table

开源地址：https://github.com/redbug312/markdown-it-multimd-table

感觉反而是这个项目最好参考

使用

以 VuePress-Hope-Theme 的环境为例

// shell
> pnpm install -D markdown-it-multimd-table

// config.ts
import mdit_plugin_multimd_table_plugin from "markdown-it-multimd-table"
...
export default defineUserConfig({
    extendsMarkdown: (md: markdownit) => {
        md.use(mdit_plugin_multimd_table_plugin);
    },
});

// .../markdown-it-multimd-table/index.d.ts
export default function multimd_table_plugin(md: MarkdownIt, options?: Partial<Options>): void;

项目结构

项目目录树：

lib

support

test

.eslintignore

.eslintrc.yml

bower.json

index.d.ts

index.js

Makefile，怎么还有makefile文件……

(项目通用文件)

node_modules

.github

dist

LICENS

.gitignore

package-lock.json

package.json

README.md

代码分析

[index.d.ts]：

import type MarkdownIt from "markdown-it";
interface Options {
  multiline: boolean;
  rowspan: boolean;
  headerless: boolean;
  multibody: boolean;
  autolabel: boolean;
}
export default function multimd_table_plugin(md: MarkdownIt, options?: Partial<Options>): void;

[index.js]：

module.exports = function multimd_table_plugin(md, options) {	// 插件的所有逻辑都写在里面了
    ...
};

markdown-it-link-to-card (这个不对)

开源地址：https://github.com/luckrya/markdown-it-link-to-card

使用

以 VuePress-Hope-Theme 的环境为例

// shell
> npm i -D @luckrya/markdown-it-link-to-card

// config.ts
import { linkToCardPlugin } from "@luckrya/markdown-it-link-to-card"      // markdwon-it插件
//import pkg from '@luckrya/markdown-it-link-to-card';
//const { linkToCardPlugin } = pkg;
...
export default defineUserConfig({
    extendsMarkdown: (md: markdownit) => {
        md.use(linkToCardPlugin);
    },
});

// .../markdown-it-link-to-card/index.d.ts
export * from "./api";
export * from "./link-to-card-plugin"; // 这里面写了 `export declare const linkToCardPlugin: LinkToCardPlugin;`
export * from "./types";

无法使用：

但结果就是报错，说这是一个 CommonJS 模块，反正在 VuePress 里就是用不了，但他的官方示例里说 VitePress 可以用？真奇怪。

项目结构

项目结构目录树：

• src/
  • assemble/
  • api.ts
  • index.ts
  • link-to-card-plugin.ts
  • types.ts
• .babelrc
• .gitignore
• package.json
• pnpm-lock.yaml
• rollup.config.js
• tsconfig.json
• (文档相关)
  • LICENSE
  • README.md

markdown-it-emoji (这个不对)

https://github.com/markdown-it/markdown-it-emoji

这个好像不是，怎么好像都是编译后的产物了？npm i 又会卡住

项目结构目录树：

• .github/
• lib/
• support/
• test/
• .eslintrc.yml
• .gitignore
• index.mjs
• package.json
• rollup.config.mjs
• (文档相关)
  • CHANGELOG.md
  • LICENSE
  • README.md

markdown-it 项目源码

参考开源地址：https://github.com/markdown-it/markdown-it/blob/master/lib/

目录树：

• ...
• lib/
  • common/
  • helpers/
  • presets/
  • rules_block/
  • rules_core/
  • rules_inline
  • index.mjs
  • parser_block.mjs
  • parser_core.mjs
  • parser_inline.mjs
  • renderer.mjs
  • ruler.mjs
  • token.mjs