用于显示几段相似功能的代码：
npm i gem-bookpnpm add gem-bookyarn add gem-book<gbp-code-group>
```bash npm
npm i gem-book
```
```bash pnpm
pnpm add gem-book
```
```bash yarn
yarn add gem-book
```
</gbp-code-group>用于显示远端代码，如果提供的 src 只包含路径，则会从当前项目的 GitHub 上读取内容（受 sourceDir，sourceBranch 影响），例如：
{
"name": "gem-book",
"version": "2.2.3",
"description": "Create your document website easily and quickly",
"keywords": [
"doc",
"docs",
"documentation",
"creator",
"generator"
],
"main": "index.js",
"module": "index.js",
"bin": {
"gem-book": "bin/index.js"
},
"typings": "index.d.ts",
"files": [
"schema.json",
"/bin/",
"/common/",
"/element/",
"/plugins/",
"/public/",
"/website/",
"/themes/",
"/index.*"
],
"scripts": {
"schema": "npx ts-json-schema-generator@1.5 -p src/common/config.ts -t CliConfig -o schema.json",
"build:cli": "esbuild ./src/bin/index.ts --tsconfig=./tsconfig.cli.json --outdir=./bin --platform=node --sourcemap --bundle --packages=external",
"start:cli": "pnpm build:cli --watch",
"docs": "node ./bin docs",
"start:docs": "cross-env GEM_BOOK_DEV=true nodemon --watch bin --exec \"pnpm run docs\"",
"start": "concurrently npm:start:cli npm:start:docs",
"build:website": "pnpm build:cli && pnpm run docs --build --ga G-7X2Z4B2KV0",
"build": "pnpm build:cli && tsc -p ./tsconfig.build.json",
"test": "cross-env wtr",
"prepublishOnly": "pnpm build"
},
"dependencies": {
"@aaroon/workbox-rspack-plugin": "^0.3.2",
"@mantou/gem": "^2.2.2",
"@rspack/cli": "^1.0.5",
"@rspack/core": "^1.0.5",
"@rspack/dev-server": "^1.0.5",
"anymatch": "^3.1.3",
"chalk": "^2.4.2",
"cheerio": "^1.0.0-rc.12",
"chokidar": "^3.5.3",
"commander": "^7.2.0",
"express": "^4.17.3",
"front-matter": "^4.0.2",
"git-remote-origin-url": "^3.1.0",
"git-repo-info": "^2.1.1",
"jimp": "^0.16.1",
"marked": "^10.0.0",
"mkdirp": "^1.0.4",
"parse-github-url": "^1.0.2",
"sitemap-rspack-plugin": "^1.1.1",
"string-replace-loader": "^3.1.0",
"ts-loader": "^9.5.1",
"tslib": "^2.7.0",
"typescript": "^5.6.2",
"yaml": "^1.10.2"
},
"devDependencies": {
"@codesandbox/sandpack-client": "^2.18.2",
"@gemjs/config": "^2.1.2",
"@types/express": "^4.17.3",
"@types/jsdom": "^16.2.10",
"@types/marked": "^2.0.2",
"@types/mkdirp": "^1.0.1",
"@types/mocha": "^10.0.7",
"@types/parse-github-url": "^1.0.0",
"@types/prismjs": "^1.16.5",
"@web/dev-server-esbuild": "^1.0.2",
"@web/test-runner": "^0.18.1",
"gem-analyzer": "^2.2.2",
"nodemon": "^2.0.7",
"ts-morph": "^12.0.0"
},
"author": "mantou132",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/mantou132/gem.git",
"directory": "packages/gem-book"
},
"bugs": {
"url": "https://github.com/mantou132/gem/issues"
},
"homepage": "https://github.com/mantou132/gem#readme"
}
<!-- `range` 指定显示的范围，支持使用负数、字符串匹配，`highlight` 格式一样 -->
<gbp-raw src="package.json" range="2-3,-4--6,author-license" highlight="-5,author"></gbp-raw>引用全局变量：hello
<gbp-var>hello</gbp-var>变量需要在配置文件中定义。
显示远端多媒体内容，比如图片，视频，获取资源方式和 <gbp-raw> 一样：
<gbp-media src="preview.png"></gbp-media>动态加载 Markdown 片段：
NOTE
这是 高亮引用块
<!-- `range` 语法和 `<gbp-raw>` 一样，这里的 `range` 使用字符串匹配 -->
<gbp-include src="./guide/007-extension.md" range="[!NOTE]->"></gbp-include>动态导入模块，这可以用来按需加载插件，比如下面这个自定义元素是动态（.ts 文件会使用 esm.sh 编译 ）加载的：
<gbp-import src="docs/hello.ts"></gbp-import>
<my-plugin-hello></my-plugin-hello>将内容插入 <gem-book>，这允许在特定页面自定义 <gem-book> 内容，例如自定义侧边栏：
<gbp-content slot="sidebar-before">
<div>Test</div>
<style>
gem-book [part=sidebar-content] {
display: none;
}
</style>
</gbp-content>使用 Algolia DocSearch 为网站提供搜索，只需要实例化一次，可以使用插槽放在想要放置的位置：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<style>
gem-book:not(:defined) * {
display: none;
}
</style>
<gem-book>
<gbp-docsearch
slot="nav-inside"
app-id="05KK61XW6A"
api-key="b6738e2ef6d977e01ab3a325b91937e1"
index-name="book-gemjs"
></gbp-docsearch>
</gem-book>
</body>
</html>
WARNING
Algolia DocSearch Crawler 配置中必须启用 renderJavaScript
使用 docsearch?local 可以提供本地搜索服务（感谢 MiniSearch），例子。
它使用 Gitalk 为网站带来评论功能，和 <gbp-docsearch> 类似的使用方式：
<gem-book>
<gbp-comment
slot="main-after"
client-id="xxx"
client-secret="xxx"
></gbp-comment>
</gem-book><gbp-sandpack>
使用 Sandpack 创建交互式示例：
import { render, html } from '@mantou/gem';
import 'duoyun-ui/elements/button';
render(
html`<dy-button>Time: ${new Date().toLocaleString()}</dy-button>`,
document.getElementById('root'),
);<gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
```ts
import { render, html } from '@mantou/gem';
import 'duoyun-ui/elements/button';
render(
html`<dy-button>Time: ${new Date().toLocaleString()}</dy-button>`,
document.getElementById('root'),
);
```
</gbp-sandpack>为任何自定义元素生成示例，例如：
{
"src": "https://api.dicebear.com/5.x/bottts-neutral/svg",
"status": "positive",
"size": "large",
"square": true
}<gbp-example name="dy-avatar" src="https://esm.sh/duoyun-ui/elements/avatar">
```json
{
"src": "https://api.dicebear.com/5.x/bottts-neutral/svg",
"status": "positive",
"size": "large",
"square": true
}
```
</gbp-example>使用 gem-analyzer 为 GemElement 生成 API 文档，例如 GemBookElement API；
