前言
开发过程中，我们经常需要使用代码高亮功能，这时候需要使用第三方库帮助我们实现。其中，@atlaskit/code 是比较好的选择。它是一个基于 React 和 TypeScript 的代码高亮和呈现组件，提供了丰富的 API 和样式控制。
在本篇文章中，我们将介绍如何安装和使用 @atlaskit/code 。
安装
我们可以使用 npm 来安装 @atlaskit/code ：
npm install @atlaskit/code
使用
在我们开始编写代码之前，需要先明确一个概念：语言模式。该模式指定了我们将要高亮的语言类型。比如，如果我们要高亮 JavaScript 代码，那么需要设置 language 属性为 javascript 。
接下来，我们将对 @atlaskit/code 的使用进行详细介绍。
基础使用
我们可以使用如下代码来展示一段 JavaScript 代码：
-- -------------------- ---- -------
------ - ---- - ---- -----------------
----- ---------- - ------ ---------- - -- -- - ------------------ -------- ---
------ ------- -------- ----- -
------ -
----- ----------------------
------------
-------
--
-上述代码中，我们通过 import 引入了 Code 组件，并使用 const 定义了一段简单的 JavaScript 代码，最后将其传递给 Code 组件即可。运行效果如下所示：
标题和行号
默认情况下，@atlaskit/code 不会显示标题和行号，如果需要使用，则需要通过属性来设置。下面是一个示例代码：
-- -------------------- ---- -------
------ - ---- - ---- -----------------
----- ---------- - ------ ---------- - -- -- - ------------------ -------- ---
------ ------- -------- ----- -
------ -
----- --------------------- ---------------------- ------------ -------
------------
-------
--
-上述代码中，我们增加了 title 和 showLineNumbers 两个属性。运行效果如下所示：
自定义样式
同样的，我们可以通过样式属性来自定义代码样式：
-- -------------------- ---- -------
------ - ----- --------- - ---- -----------------
----- ---------- - ------ ---------- - -- -- - ------------------ -------- ---
------ ------- -------- ----- -
----- ----------- - -
---------------- ----------
------------- ------
----------- ------
--
------ -
----- --------------------- ----------------------- --------------------
------------
-------
--
-上述代码中，我们通过 theme 属性来设置自定义样式。我们将代码块的背景颜色设置为灰色，边框圆角设置为 5px ，行高设置为 1.5 。
结语
@atlaskit/code 是一个非常有用的 React 套件，不仅可以帮助我们高效地进行代码高亮，还允许我们自定义样式。希望这篇文章能帮助您更好地使用 @atlaskit/code 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/atlaskit-code