代码框
折旧
此套件不再保留. 它的继任者是 隐藏。 。 。 .
Clepit是来自同一支队伍的块式编辑和渲染器. 其编辑器搭载了带有语法突出的代码块,因此已不需要CodeBox了.
- 编辑文档,代码块包括:
@clepit/core- 在 React 中渲染文档 :
@clepit/react- 块类型和 JSON 形状 : clepit.com/docs/块
现有安装继续工作. 以下文件仍供遗产使用.
代码语法突出显示工具 编辑.js
设置
通过国家预防机制安装软件包
npm i @bomdi/codebox
添加到模块/应用程序
import CodeBox from '@bomdi/codebox';
OR
const CodeBox = require('@bomdi/codebox');
使用量
添加代码框 tools 属性.
const CodexEditor = require('@editorjs/editorjs');
let editor = new CodexEditor({
...
tools: {
...
codeBox: {
class: CodeBox,
config: {
themeURL: 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/dracula.min.css', // Optional
themeName: 'atom-one-dark', // Optional
useDefaultTheme: 'light' // Optional. This also determines the background color of the language select drop-down
}
},
}
...
});
配置参数
所有参数都是可选的
| 外地 | 类型 | 说明 |
|---|---|---|
| 主题URL | string | URL 指向 CSS 文件,可供您使用 突出显示.js。这也可以指向您自定义的 CSS 语法文件 。 若为 主题URL 提供, 主题Name 财务报告和审定财务报表 默认主题 将被忽略 |
| 主题Name | string | 任何一个 已接受的主题名称 用于 突出显示.js。只需要名称,而不是完整的URL(例如"a11y-dark"). 若为 主题Name 提供, 默认主题 将被忽略 |
| 默认主题 | string | 代码框 有两个默认主题 - 1 光和 1 暗。 您可以通过传递字符串指定应用什么默认值 光线 或者说 "黑暗" 转到此参数。 注意设置 主题URL 或者说 主题Name 覆盖主代码块的设置, 但是, 语言选择元素/ 下拉菜单的背景由这个值设置 |
如果没有指定参数, CodeBox 默认为暗主题.
产出数据
CodeBox 返回以下数据
{
"type": "codeBox",
"data": {
"code": "consttest = newTest();.codeBoxTextArea{\n width: 100%;\n min-height: 30px;\n padding: 10px;\n border-radius: 2px 2px 2px 0;\n border: none !important;\n outline: none !important;\n font: 14px monospace;\n}\n\n.codeBoxSelectDiv{\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n position: relative;\n}",
"language": "css",
"theme": "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css"
}
}
将数据保存为组件
如果您使用反应, 您可以将保存的数据传递到库中 编辑器 以渲染代码块组件
import { CodeBoxOutput } from 'editorjs-react-renderer';
const data = {
"type": "codeBox",
"data": {
"code": ".codeBoxTextArea{\n width: 100%;\n min-height: 30px;\n padding: 10px;\n border-radius: 2px 2px 2px 0;\n border: none !important;\n outline: none !important;\n font: 14px monospace;\n}\n\n.codeBoxSelectDiv{\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n position: relative;\n}",
"language": "css",
"theme": "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css"
}
};
const CodeBlock = () => CodeBoxOutput(data);
export default CodeBlock;
作者
德夫·朱尤