MCFunction 语法高亮工具使用指南 | MCFunction Syntax Highlighter Usage Guide

项目已完成 | Project Completed

在线演示 | Online Demo: https://1.lvjia.cc/

安装 | Installation

$3

1. 下载以下两个文件 | 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
    


`

$3

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 =






${highlightedCode}


;

console.log(html); // 输出生成的 HTML
`

使用方法 | Usage

$3

将你的 MCFunction 代码放在带有特定类名的

 和  标签中：
Place your MCFunction code within 
 and  tags 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();
`
注意：使用 highlightElement 方法时，确保传入的元素是带有 language-mcfunction 类名的  元素。
Note: When using the highlightElement method, make sure the input element is a  element with the language-mcfunction class.
$3
你可以在初始化前配置一些选项：
You can configure some options before initialization:
`javascript
// 配置选项 | Configure options
MCFunctionHighlight.configure({
    autoUpdate: false  // 禁用自动更新 | Disable auto-update
});
// 然后初始化 | Then initialize
MCFunctionHighlight.init();
`
可用的配置选项 | Available configuration options:
- autoUpdate: (默认值: true) 是否自动检测和高亮新添加的代码块。设为 false 时需要手动调用高亮方法。
  (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. highlight(code): 返回高亮后的 HTML 代码片段 | Returns highlighted HTML code snippet
2. highlightWithWrapper(code): 返回带有包装器的完整 HTML | Returns complete HTML with wrapper
3. getCSS(): 返回必要的 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