MCFunction 语法高亮器
npm install mcfunction-highlight1. 下载以下两个文件 | Download these two files:
- mcfunction-highlight.min.css
- mcfunction-highlight.min.js
2. 在 HTML 中引入文件 | Include files in your HTML:
``html`
execute as @a at @s run setblock ~ ~ ~ minecraft:stone
1. 通过 npm 安装 | Install via npm:
`bash`
npm install mcfunction-highlight
2. 在代码中使用 | Use in your code:
`javascript
// 导入模块
const MCFunction = require('mcfunction-highlight');
// MCFunction 代码
const code = execute as @a at @s run setblock ~ ~ ~ minecraft:stone;
// 生成高亮后的 HTML
const highlightedCode = MCFunction.highlightWithWrapper(code);
// 完整的 HTML 页面
const html =
;console.log(html); // 输出生成的 HTML
`使用方法 | Usage
$3
将你的 MCFunction 代码放在带有特定类名的
和标签中:
Place your MCFunction code withinandtags with specific class:`html`
execute at @a in minecraft:the_end run setblock ~ ~-1 ~ minecraft:diamond_block`如果你需要手动高亮新添加的代码块:
If you need to manually highlight newly added code blocks:javascript`
// 高亮单个元素 | Highlight single element
const codeElement = document.querySelector('pre > code.language-mcfunction');
MCFunctionHighlight.highlightElement(codeElement);// 高亮所有元素 | Highlight all elements
MCFunctionHighlight.highlightAll();language-mcfunction注意:使用 highlightElement 方法时,确保传入的元素是带有
类名的元素。
Note: When using the highlightElement method, make sure the input element is aelement with thelanguage-mcfunctionclass.`$3
你可以在初始化前配置一些选项:
You can configure some options before initialization:javascript`
// 配置选项 | Configure options
MCFunctionHighlight.configure({
autoUpdate: false // 禁用自动更新 | Disable auto-update
});// 然后初始化 | Then initialize
MCFunctionHighlight.init();autoUpdate可用的配置选项 | Available configuration options:
-: (默认值: true) 是否自动检测和高亮新添加的代码块。设为 false 时需要手动调用高亮方法。highlight(code)
(Default: true) Whether to automatically detect and highlight newly added code blocks. When set to false, you need to call highlight methods manually.$3
Node.js 环境提供了三个主要方法:
Node.js environment provides three main methods:1.
: 返回高亮后的 HTML 代码片段 | Returns highlighted HTML code snippethighlightWithWrapper(code)
2.: 返回带有包装器的完整 HTML | Returns complete HTML with wrappergetCSS()
3.: 返回必要的 CSS 样式 | Returns required CSS styles`javascript``
const MCFunction = require('mcfunction-highlight');// 基础高亮 Basic highlighting
const highlighted = MCFunction.highlight('execute as @a at @s run say Hello');// 带包装器的高亮 Highlighting with wrapper
const withWrapper = MCFunction.highlightWithWrapper('execute as @a at @s run say Hello');// 获取 CSS 样式 Get CSS styles
const css = MCFunction.getCSS();$3
- 语法高亮 Syntax highlighting
- 自动复制按钮(仅浏览器环境)Auto-copy button (browser only)
- 暗色主题 Dark theme
- DOM 变化监听(仅浏览器环境)DOM mutation observer (browser only)
- 支持 Node.js 和浏览器环境 Support for both Node.js and browser environments