安装使用_VuePress版

LincZero大约 3 分钟

安装使用_VuePress版

该插件一开始是在Obsidian开发的，后来被我迁移到在 Markdown-it 里也能用，即支持使用mdit的 VuePress/VitePress 都能通用的

使用方式

暂时还没封装和上传npm，想要提前用的直接去我github的网页项目里把ABConvertManager文件夹取出来，当普通mdit插件用就行。

源码版安装

以vuepress为例：

基本使用：

把 ABConvertManageropen in new window 文件夹单独拿出来，并放在你项目中
在 vuepress 项目中的 .vuepress/config.ts 文件中，添加：(有 + 的是新增内容)

import ab_mdit from "./plugin/ABConvertManager/src/index_mdit" // + 路径是：你拷贝后的文件夹所在路径/src/index_midt
export default defineUserConfig({
  extendsMarkdown: (md: markdownit) => { // + 就像使用普通的mdit插件那样使用
    md.use(ab_mdit)                      // +
  }                                      // +
})

然后正常编译使用

依赖补充：

通过源码进行的安装方式，不像npm版那样自动安装依赖。所以手动安装就好。可能缺少的依赖：

"jsdom": "^24.1.1",
"markdown-it-container": "^4.0.0",
"markmap-lib": "^0.17.0",
"mermaid": "^10.9.1"

如果你遇到了一些依赖问题，可以将 AnyBlock 部分功能禁用，以避免干扰方便调试。

若你这样做，着插件的很多依赖就变得“不再依赖”。这可能可以解决一些由于依赖所引起的bug 将 index_mdit.ts 文件中的部分行注释掉：(对应的文件也可以暂时删除掉)

import "./converter/abc_list"
import "./converter/abc_c2list"
import "./converter/abc_table"
import "./converter/abc_dir_tree"
import "./converter/abc_deco"
import "./converter/abc_ex"
import "./converter/abc_mdit_container"
import "./converter/abc_plantuml" // 可选建议：
import "./converter/abc_mermaid"  // 可选建议：7.1MB
import "./converter/abc_markmap"  // 可选建议：1.3MB

伴侣插件。有一些插件可以和 AnyBlock 很好地配合：

如 hopeTheme 配置中的 plugins/mdEnhance 中的：~~alert~~、tabs、~~demo~~、~~codetabs~~、mermaid、markmap

npm版安装

（注意，该版本由于未解决的bug，不支持markmap）

先安装：

$pnpm install -D jsdom
$pnpm install -D any-block-converter-markdown-it@3.1.3-beta11 # 不能低于这个版本，否则不可用

在 vuepress 项目中的 .vuepress/config.ts 文件中，添加：

import ab_mdit from "any-block-converter-markdown-it" // +

// + 这里需要自 pnpm install jsdom，不知道为什么这部分不能在模块里依赖，会有bug......
import jsdom from "jsdom"
const { JSDOM } = jsdom
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`, {
  url: 'http://localhost/', // @warn 若缺少该行，则在mdit+build环境下，编译报错
});
// @ts-ignore 不能将类型“DOMWindow”分配给类型“Window & typeof globalThis”
global.window = dom.window
global.history = dom.window.history // @warn 若缺少该行，则在mdit+build环境下，编译报错：ReferenceError: history is not defined
global.document = dom.window.document
global.NodeList = dom.window.NodeList
global.HTMLElement = dom.window.HTMLElement
global.HTMLDivElement = dom.window.HTMLDivElement
global.HTMLPreElement = dom.window.HTMLPreElement
global.HTMLQuoteElement = dom.window.HTMLQuoteElement
global.HTMLTableElement = dom.window.HTMLTableElement
global.HTMLUListElement = dom.window.HTMLUListElement
global.HTMLScriptElement = dom.window.HTMLScriptElement
dom.window.scrollTo = ()=>{} // @warn 若缺少该行，编译警告：Error: Not implemented: window.scrollTo*/

export default defineUserConfig({
  extendsMarkdown: (md: markdownit) => { // + 就像使用普通的mdit插件那样使用
    md.use(ab_mdit)                      // +
  }                                      // +
})

Demo

https://github.com/any-block/VuepressDemo 提供了一个使用AnyBlock的最小仓库 (vuepress2 环境，使用npm安装)，并列出了从零构建该仓库的某一步的过程
https://github.com/any-block/VitePressDemo 提供了一个使用AnyBlock的最小仓库 (vitepress 环境，使用npm安装)，并列出了从零构建该仓库的某一步的过程
https://github.com/LincZero/LincZero.github.io 提供了一个使用AnyBlock的仓库 (vuepress-theme-hope 环境，使用源码方案，但这个仓库不是demo仓库，有很多其他的东西可能会影响参考)

常见问题

不生效

注意是 extendsMarkdown (有 s) 还是 extendMarkdown

这不仅仅是书写错误，主要是后者是真实存在的关键字。

https://vuepress.github.io/zh/guide/migration.html#%E7%94%A8%E6%88%B7%E9%85%8D%E7%BD%AE%E5%8F%98%E6%9B%B4 中写了：

markdown.extendMarkdown
移除。
使用 extendsMarkdown Hook

一般我们用的是V2，是有 s 的

样式

mdit无法直接嵌入样式，或者说只能在dom中直接嵌入样式，会导致后期用户很难修改

需要手动去使用对应项目的 scss/css