使用Spatie的CommonMarkHighlighter为你的代码块增添亮点

钟洁祺

于 2024-06-18 09:42:14 发布

阅读量250

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00056/article/details/139763176

版权

使用Spatie的CommonMarkHighlighter为你的代码块增添亮点

commonmark-highlighterHighlight code blocks with league/commonmark项目地址:https://gitcode.com/gh_mirrors/co/commonmark-highlighter

在网页中展示代码时，高亮显示是一种提升可读性的有效方式。Spatie的CommonMarkHighlighter就是这样一款专门为League/CommonMark扩展而设计的工具，它利用Scrivo/Highlight.PHP库来实现服务器端的代码高亮。

项目介绍

CommonMarkHighlighter是基于PHP的Markdown解析器League/CommonMark的一个扩展，它的主要功能是在Markdown中处理代码块，并使用Highlight.PHP进行语法高亮。值得一提的是，Highlight.PHP支持185种编程语言，并且其HTML输出与JavaScript库highlight.js的主题兼容。

与其他前端解决方案如highlight.js相比，CommonMarkHighlighter的优势在于：

减少了对JavaScript的依赖，从而加快页面加载速度。
消除了未样式化的代码块闪现问题，提供更流畅的用户体验。

该项目受到了sixlive/parsedown-highlight的启发，旨在简化Markdown中的代码高亮过程。

技术分析

安装CommonMarkHighlighter非常简单，只需通过Composer执行以下命令：

composer require spatie/commonmark-highlighter

接着，你需要创建一个自定义的CommonMark环境并注册FencedCodeRenderer和IndentedCodeRenderer。这是在League(CommonMark文档中关于块渲染的说明基础上完成的：

use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
use League\CommonMark\Extension\CommonMark\Node\Block\IndentedCode;
use League\CommonMark\MarkdownConverter;
use Spatie\CommonMarkHighlighter\FencedCodeRenderer;
use Spatie\CommonMarkHighlighter\IndentedCodeRenderer;

$environment = new Environment();
$environment->addExtension(new CommonMarkCoreExtension());
$environment->addRenderer(FencedCode::class, new FencedCodeRenderer());
$environment->addRenderer(IndentedCode::class, new IndentedCodeRenderer());

$markdownConverter = new MarkdownConverter($environment);

echo $markdownConverter->convertToHtml($markdown);

此外，你可以指定要自动检测的语言子集，或者甚至突出显示特定行，通过传递给渲染器一个语言数组或使用行号标记。