BBCode 文档

BBCode 组件提供解析和渲染 BBCode 格式的功能，包括预览和编辑两种模式。

✨ 特性

🖥️ 双视图模式
- 支持「预览」与「代码」两种模式自由切换。
📄 BBCode 转思维导图
- 内置解析器，能将 BBCode 内容解析为树形结构并渲染成富文本。
💾 导出功能
- 一键下载BBCode的html 文件或 BBCode 源码文件。
🧩 嵌入式全屏
- 纯 CSS 实现，不依赖浏览器全屏 API。

📦 引入&使用

单个引入

在你要使用的页面中引入组件

<script setup>
    import { defineClientComponent } from 'vitepress'
    import { BBCode } from '@leelaa/vitepress-plugin-extended'
    const BBCodeView = defineClientComponent(() => BBCode)
</script>

全局引入

在你的.vitepress/theme/index.ts中引入组件

import { defineAsyncComponent, h } from 'vue';
import DefaultTheme from 'vitepress/theme';
import { BBCode } from '@leelaa/vitepress-plugin-extended'
export default {
    enhanceApp({ app }) {
         app.component('BBcode', BBCode)
    }
}

扩展md插件

在你的.vitepress\config.ts中引入插件

import { defineConfig } from 'vitepress';
import { BBCodePlugin } from '@leelaa/vitepress-plugin-extended';
export default defineConfig({
    markdown: {
        breaks: true,
        math: true,
        lineNumbers: true,
        lazyLoading: true,
        config: (md) => {
            BBCodePlugin(md);
        },
    },
})

📁 示例

粗体文本

斜体文本

下划线文本

这是一个链接

BBCode Image

这是一段引用文本

console.log('这是代码块');
function example() { return true; }

这是大一点的文本

这是红色文本

BBCode 预览组件

vue

<BBCode content="[b]粗体[/b] [i]斜体[/i] [url=https://leelaa.cn]链接[/url]"/>

粗体斜体链接

md 文件中使用

``` bbcode
[b]粗体[/b] [i]斜体[/i] [url=https://leelaa.cn]链接[/url]
```

粗体斜体链接

🎈 组件参数说明

参数名	类型	默认值	描述
`content`	`string`	`""`	输入的 BBCode 内容
`theme`	`"light"` \| `"dark"`	`"light"`	主题风格（未来可扩展样式）
`height`	`string`	`"600px"`	组件高度

BBCode 文档 ​

✨ 特性 ​

📦 引入&使用 ​

单个引入 ​

全局引入 ​

扩展md插件 ​

📁 示例 ​

BBCode 预览组件 ​

md 文件中使用 ​

🎈 组件参数说明 ​

📄 支持的 BBCode 标签 ​

BBCode 文档

✨ 特性

📦 引入&使用

单个引入

全局引入

扩展md插件

📁 示例

BBCode 预览组件

md 文件中使用

🎈 组件参数说明

📄 支持的 BBCode 标签