如何阻止Torchlight代码高亮器解析Blade组件？求替代方案

一、让Torchlight原样展示Blade组件代码的方法 #

如果Torchlight自动解析Blade组件标签（如<x-input-wrapper>）导致无法原样展示，可尝试以下两种方案：

• 指定代码语言为纯文本：在Torchlight代码块中明确设置语言为plaintext，跳过所有语法解析，直接原样渲染代码。示例：

  <x-input-wrapper>
        <x-input label="Label" class="block w-60 mt-1" type="text"
           placeholder="{{ __('With Label') }}" />
  </x-input-wrapper>
  

• 手动转义特殊字符：将代码中的<替换为<，>替换为>，{{替换为{{，}}替换为}}，让Torchlight将这些字符视为普通文本，避免解析为Blade语法。

二、好用的代码高亮替代工具 #

• Prism.js：轻量灵活，支持多语言，可通过插件扩展功能，加载速度快，适合需要高自定义度的前端场景。
• Highlight.js：开箱即用，能自动检测代码语言，集成简单，默认支持大量语言，适合快速搭建的项目。
• Shiki：基于VS Code语法引擎，语法高亮准确度极高，支持丰富主题，可还原VS Code的高亮效果，适合追求精准高亮的场景。

内容的提问来源于stack exchange，提问作者Mario Ariyanto