在前端开发中，代码的格式化一直是一个比较麻烦的问题。而 react-code-prettify 是一个相对较好的解决方案。本文将为大家详细介绍如何使用这个 npm 包。
什么是 react-code-prettify
react-code-prettify 是一个基于 React 的代码格式化组件。使用它，你可以轻松地将代码片段的格式整理得更加美观、易读，并支持多种语言的代码高亮。
安装 react-code-prettify
使用 npm 安装 react-code-prettify：
npm install react-code-prettify
使用 react-code-prettify
在 react-code-prettify 中，你可以使用 <SyntaxHighlighter> 组件来进行代码高亮，示例如下：
-- -------------------- ---- -------
------ ----------------- ---- ----------------------
----- ---- - --------- ------ -- -
------ - - --
---
------ ------- -------- ----- -
------ -
------------------ ----------------------
- ---- -
--------------------
--
-这里简单介绍一下 <SyntaxHighlighter> 组件的使用方法：
language属性：设置高亮语言。- 子节点：放置需要格式化的代码片段。
还有其他的一些属性可以配置，详见官方文档。
示例
下面是一个更完整的示例，代码展示了如何使用 react-code-prettify 来显示一段 markdown 格式的代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ ------ ---- ---------
------ ----------------- ---- ----------------------
----- ---- - -- -- --------
---- -- ---- -----
----------------
-------- ------ -- -
------ - - --
-
------
--------
-------------------
---------- ------ ----- -- -
------ ------ ------------- ---------------------
--
---
------ ------- -------- ----- -
----- ---- - -------------
------ -
-----
---- -------------------------- ------- ---- -- --
------------------ ------------------------------------------------
------
--
-
----------- --- --------------------------------总结
本文介绍了如何使用 npm 包 react-code-prettify 来进行代码的格式化和高亮。希望这篇教程能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591081e8991b448d6800