在线演示 | Online Demo: https://1.lvjia.cc/
-
下载以下两个文件 | Download these two files:
mcfunction-highlight.min.cssmcfunction-highlight.min.js
-
在 HTML 中引入文件 | Include files in your HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mcfunction-highlight/dist/mcfunction-highlight.min.css">
<script src="https://cdn.jsdelivr.net/npm/mcfunction-highlight/dist/mcfunction-highlight.min.js"></script>
<script>
// 等待 DOM 加载完成后初始化 Initialize after DOM content loaded
window.addEventListener('DOMContentLoaded', () => {
MCFunctionHighlight.init();
});
</script>
<pre><code class="language-mcfunction">execute as @a at @s run setblock ~ ~ ~ minecraft:stone
</code></pre>- 通过 npm 安装 | Install via npm:
npm install mcfunction-highlight- 在代码中使用 | Use in your code:
// 导入模块
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 = `
<!DOCTYPE html>
<html>
<head>
<style>${MCFunction.getCSS()}</style>
</head>
<body>
${highlightedCode}
</body>
</html>
`;
console.log(html); // 输出生成的 HTML将你的 MCFunction 代码放在带有特定类名的 <pre> 和 <code> 标签中：
Place your MCFunction code within <pre> and <code> tags with specific class:
<pre><code class="language-mcfunction">
execute at @a in minecraft:the_end run setblock ~ ~-1 ~ minecraft:diamond_block
</code></pre>如果你需要手动高亮新添加的代码块： If you need to manually highlight newly added code blocks:
// 高亮单个元素 | Highlight single element
const codeElement = document.querySelector('pre > code.language-mcfunction');
MCFunctionHighlight.highlightElement(codeElement);
// 高亮所有元素 | Highlight all elements
MCFunctionHighlight.highlightAll();注意：使用 highlightElement 方法时，确保传入的元素是带有 language-mcfunction 类名的 <code> 元素。
Note: When using the highlightElement method, make sure the input element is a <code> element with the language-mcfunction class.
你可以在初始化前配置一些选项： You can configure some options before initialization:
// 配置选项 | 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.
Node.js 环境提供了三个主要方法： Node.js environment provides three main methods:
highlight(code): 返回高亮后的 HTML 代码片段 | Returns highlighted HTML code snippethighlightWithWrapper(code): 返回带有包装器的完整 HTML | Returns complete HTML with wrappergetCSS(): 返回必要的 CSS 样式 | Returns required CSS styles
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();- 语法高亮 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