next js中如何使用语法高亮？

Question

我能够在remark 和remark-html 的帮助下解析降价。如何为 code 元素添加语法高亮功能？

Answer 1

我一直在寻找整整两天尝试在语法高亮上使用 remark/rehype 生态系统，这使用起来更复杂。我仍在努力寻找，最好避免评论/重新炒作生态系统并尝试其他方法。

在这里，我分享我的搜索列表，只是给你一些主观的观点，这样你就不会在不起作用的事情上浪费太多时间。它们都不会像您预期的那样工作，并且它们的示例代码晦涩难懂或只是损坏的代码。

1. https://github.com/remarkjs/remark-highlight.js
   

   • 他们开始支持重新炒作。你是他们的忠实粉丝也想搬家吗？

2. https://github.com/sergioramos/remark-prism
   

   • 您将收到此错误：Module parse failed: Unexpected character '�'

3. https://github.com/torchlight-api/remark-torchlight
   

   • 他们在他们的网站上声明：? 这个客户端仍在进行中。请打开问题！ ?在github上查看github.com/torchlight-api/remark并且此链接无效。

4. https://github.com/rehypejs/rehype-highlight
   

   • 它会强制您使用重新炒作，尽管您可以通过评论重新炒作来轻松转移。但是，一旦遇到错误，调试您的代码将是无能为力的。
   • 示例代码使用第三方v-file 读取文件，显示他们的代码可以正常工作，但不能。它读取 html 文件而不是 markdown 文件。
   • 您很难掌握他们的概念来轻松使用他们的插件。思考他们的想法会浪费你们大多数人的宝贵时间。

   我放弃评论/再炒作生态系统并远离它们。祝你好运！ :)