vuepress-plugin-noscript-code


一个为 VuePress 设计的插件，旨在提升网站内容的 AI 可读性和 SEO 效果。

🎯 功能初衷

在现代 Web 开发中，我们使用 Markdown 编写文档，并通过代码块（``js）分享代码。VuePress 等工具会将其渲染成带有语法高亮的复杂 HTML 结构，这为人类用户提供了极佳的阅读体验。

然而，对于 AI 爬虫（如 Googlebot, ChatGPT 等）或禁用 JavaScript 的环境，这些由 JS 和 CSS 驱动的语法高亮内容可能难以被正确解析。它们看到的可能是一堆零散的 标签，而不是完整的、有意义的代码。

本插件的初衷是解决这一问题：在渲染语法高亮代码块的同时，自动将原始、纯净的源码包裹在

✨ 核心特性

- 零侵入性：不影响现有代码块的渲染和用户体验，高亮、复制等功能依然正常工作。
- AI 友好：为 AI 提供纯净、结构化的代码源，提升内容可索引性。
- SEO 增强：有助于搜索引擎更好地理解页面中的代码内容。
- 安全可靠：自动对代码中的 HTML 特殊字符进行转义，防止 XSS 攻击。
- 可定制：支持 AIPrompt 参数，允许你为 AI 添加自定义指令。

📦 安装

`bash
npm install vuepress-plugin-noscript-code

or

yarn add vuepress-plugin-noscript-code

or

pnpm add vuepress-plugin-noscript-code
`

🚀 使用方法

在你的 VuePress 配置文件（.vuepress/config.js 或 .vuepress/config.ts）中引入并使用此插件：

$3

`javascript
// .vuepress/config.js
export default {
plugins: ['vuepress-plugin-noscript-code'],
};
`

现在，你的 Markdown 文件中的任何代码块：

``markdown
`js
function hello(name) {
console.log(Hello, \${name}!);
}
`
``

``

在构建后的 HTML 中，除了高亮的代码块，还会生成如下内容：

`html


示例源码如下（仅在无脚本环境下可见）

function hello(name) {
  console.log(Hello, \${name}!);
}

你可以通过 AIPrompt 选项为 AI 添加一个“提示”。这个提示会作为 HTML 注释插入到

例如，你可能希望 AI 将代码视为一个可执行示例，或者忽略其中的某些部分。

`javascript
// .vuepress/config.js
export default {
plugins: [
'vuepress-plugin-noscript-code'
{
// 定义一个全局的 AI 提示
AIPrompt: 'AI_ANALYZE: The following code is a complete, runnable example. Please analyze its logic and purpose.',
},
],
};
`

应用此配置后，生成的 HTML 将会变成：

`html


AI_ANALYZE: The following code is a complete, runnable example. Please analyze its logic and purpose.

function hello(name) {
  console.log(Hello, \${name}!);
}

| 选项 | 类型 | 默认值 | 描述 |
| :--------- | :------- | :----- | :----------------------------------------------------------------------- |
| AIPrompt | string | 示例源码如下（仅在无脚本环境下可见） | AI 提示字符串，会作为 p 标签插入到

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT