什么是 Pretty-Inplace？
Pretty-Inplace 是一个 npm 包，用于在 HTML 页面中漂亮地显示代码段，并支持语法高亮等功能。它基于 Prism.js 构建而成，支持多种语言的语法高亮，并且可以自定义主题样式。
安装
要使用 Pretty-Inplace，需要先在项目中安装该包。可以使用 npm 或 yarn 进行安装：
npm install --save pretty-inplace # 或者 yarn add pretty-inplace
如何使用？
安装成功后，在需要展示代码的 HTML 元素上添加 data-pretty-inplace 属性：
<pre data-pretty-inplace>
<code>
function helloWorld() {
console.log('Hello, World!');
}
</code>
</pre>然后在脚本中初始化 Pretty-Inplace：
import prettyInplace from 'pretty-inplace';
prettyInplace({
selector: '[data-pretty-inplace]',
theme: 'tomorrow',
plugins: ['toolbar', 'copy-to-clipboard']
});在这个例子中，我们选择了 data-pretty-inplace 作为要处理的元素，使用了 'tomorrow' 主题，并启用了 'toolbar' 和 'copy-to-clipboard' 插件。
可以自定义主题样式，代码如下：
-- -------------------- ---- ------- ---------------------- ------------------ - ----------------- -------- - ---------------------- --------------- ---------------------- -------------- ---------------------- --------------- ---------------------- ------------ - ------ -------- - ---------------------- ----------------- ---------------------- ------------------ ---------------------- -------------- ---------------------- -------------- ---------------------- ----------- ---------------------- ------------- -------------- ---------------------- -------------- ------------- - ------ -------- - ---------------------- --------------- ---------------------- --------------- ---------------------- ------------- ---------------- ---------------------- -------------- ---------------- ---------------------- -------------- ---------------- ---------------------- ------------ -------------- ---------------------- ------------ -------------- ---------------------- ------------- ---------- - ------------------- ---------------------- ------------ --------------- ---------------------- ------------ ----------------- ---------------------- ------------ ----------- - ------ -------- - ---------------------- ---------------- ---------------------- ----------------- ---------------------- -------------- ---------------------- ------------- --------------- - ------ -------- - ---------------------- ----------- ---------------------- ---------------- ---------------------- ------------------ - ------ -------- - ---------------------- ---------------- - -------- --- - ---------------------- -------- - ----------------- -------- ------ ------- ----------- -
插件
Pretty-Inplace 支持多种插件，包括：
toolbar：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552a181e8991b448d011d