在前端开发中，我们经常需要展示一些示例代码来演示我们的组件或页面的功能。以往，我们可能需要手动复制粘贴这些代码，或者使用截图的方式展示。但是，这些方法都不够高效、不够灵活。现在，有一个好用的 npm 包可以帮助我们实现这个目标：storybook-addon-code。
storybook-addon-code 是一个 storybook 插件，它可以让我们在 storybook 中展示示例代码，并且可以自定义代码的语言、高亮、缩进等设置。在本文中，我们将学习如何使用 storybook-addon-code。
安装
为了使用 storybook-addon-code，我们需要先安装它。可以通过以下命令来安装：
npm install --save-dev storybook-addon-code
配置
安装完成后，我们需要在 storybook 中配置 storybook-addon-code。在 .storybook/addons.js 文件中，添加以下代码：
import 'storybook-addon-code/register';
然后，在 .storybook/config.js 文件中，添加以下配置：
import { addDecorator } from '@storybook/react';
import { withCode } from 'storybook-addon-code';
addDecorator(withCode({}));以上配置中，我们使用了 withCode 函数来添加 storybook-addon-code 的支持。可以传入一个配置对象来自定义一些参数，比如语言、缩进等等。此外，我们还需要在 withCode 函数中包裹我们的 storybook 组件，比如：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ ------ ---- ----------- ------ - -------- - ---- ----------------------- ----- ----------- - - ------- ---------------------------- --------------- -- ------------------- ------- ------------------------ --------- ------ ----------- --- --------------- -- -- -------------- -----------------
在上面的代码中，我们通过 withCode 函数的参数来指定代码的语言为 jsx，并且直接传入了一段示例代码。
使用
完成上述配置后，就可以在 storybook 中使用 storybook-addon-code 了。在我们的 storybook 组件中，会自动添加一个 Show Code 按钮，点击它就可以展示示例代码。
示例代码也支持复制、下载、全屏等功能，使得我们的示例展示更加灵活、方便。
此外，我们还可以在 withCode 函数中传入一些参数来控制代码的展示。比如：
language：代码语言；exampleCode：示例代码；format：代码格式化函数；codeIndent：代码缩进量；enableClipboard：是否启用剪贴板操作；clipboardCopyMessage：复制成功后的提示信息。
总结
通过以上步骤，我们就可以使用 storybook-addon-code 来展示示例代码了。它不仅让我们的示例展示更加灵活、方便，而且还可以自定义代码的语言、高亮、缩进等设置，非常实用和方便。
在实际开发中，可以结合 storybook-addon-code 和 storybook 来创建一些漂亮、可交互的组件库，方便我们开发和测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f8d9381d61a3540f99