doc-note是基于prismjs开发的语法高亮vue2
组件, 支持编辑和提交.
♦ vue3版doc-note
-> 请看 um-note
Doc-note is a syntax highlighting vue2
component developed based on prismjs, which supports editing and submission
♦ doc-note for vue3
-> see um-note
-- 基本用法 --
- 下载依赖
npm i doc-note -S
- 注册组件
import { DocNote, DocNoteConfig } from 'doc-note'
DocNoteConfig()
Vue.use(DocNote)
* DocNoteConfig 配置
- .vue文件中使用
<template>
<doc-note :codes="code"/>
</template>
export default {
data() {
return {
code: `const helloWord = 'Hello, doc-note!'`
}
}
}
-- props --
参数 | 说明 | 类型 | 默认值 |
---|
width | 组件的宽度. *必须带单位. | string | '100%' |
height | 组件的高度. *必须带单位. | string | 'auto' |
editable | 是否开启可编辑功能. 如果editable 的值是false, 则隐藏组件右上角的编辑开关. | boolean | false |
foldable | 是否开启折叠功能. 如果foldable 的值是false, 则unfold 属性将失效, 组件将保持展开状态. | boolean | true |
unfold | 是否默认展开组件. | boolean | false |
*codes | 需要展示的代码. 查看属性codes的格式. | string | object | array | [] |
language | 组件的默认语言. | string | 'javascript' |
-- event --
类型 | 格式 | 示例 |
---|
string | - | `const value = 'Hello Word!'` |
object | { language : [ string | 可选 | 默认: 'javascript' ], code : [ string | 可选 | 默认: '' ] } | { language : 'javascript', code : `const value = 'Hello Word!'` } |
array | [ { language : [ string | 可选 | 默认: 'javascript' ], code : [ string | 可选 | 默认: '' ] }, ...... ] | [ { language : 'html', code : `<div>{{ msg }}<div>` }, { language : 'javascript', code : `const msg = 'Hello Word!'` }, ...... ] |
submitInfo的属性 | 类型 | 说明 |
---|
data | array | 需要提交的数据. [ { code : [ 原始展示用代码 | string ], language : [ 实际代码语言 | string ], processedCode : [ prismjs处理过的代码 | string ], showingLanguage : [ 展示的语言 | string ] }, ...... ] |
close | function | 初始化组件的编辑状态为'未编辑'状态. |
- DocNoteConfig * DocNoteConfig必须在组件挂载之前被调用
名称 | 类型 | 功能 | 回调参数 | 回调参数类型 | 回调参数说明 |
---|
DocNoteConfig | function | 配置doc-note的主题、支持语言、权限等. | Configure | object | DocNoteConfig方法的配置对象 |
Configure的属性 | 类型 | 功能 | 默认值 | 回调参数 | 回调参数类型 | 回调参数说明 |
---|
theme | string | 配置doc-note的主题. [所有主题]. [示例]. | 'default' | - | - | - |
languages | array | 配置doc-note支持的语言. [所有可被支持的语言]. [示例] | ['html', 'javascript', 'css'] | - | - | - |
contentNames | object | 配置doc-note中删除代码块弹框中的相关文字描述. [示例] | undefined | - | - | - |
editConfigure | function | 配置doc-note中的编辑权限. [示例] | undefined | next | function | 继续下一步. |
addConfigure | function | 配置doc-note中添加代码块权限. [示例] | undefined | next | function | 继续下一步. |
removeConfigure | function | 配置doc-note中删除代码块权限. [示例] | undefined | next | function | 继续下一步. |
submitConfigure | function | 配置doc-note中的提交权限. [示例] | undefined | next | function | 继续下一步. |
$ - 配置示例
- 配置主题
console.log(Prism.allThemes)
DocNoteConfig({
theme: 'okaidia'
})
- 配置语言
console.log(Prism.allLanguages)
console.log(Prism.hasLanguage('html'))
DocNoteConfig({
languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)']
})
DocNoteConfig({
contentNames: {
cancel: 'cancel',
confirm: 'done',
explain: 'Are you sure to delete??',
}
})
DocNoteConfig({
editConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`You don't have permission! Please log in first!!!`)
}
}
})
DocNoteConfig({
addConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`You don't have permission! Please log in first!!!`)
}
}
})
DocNoteConfig({
removeConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`You don't have permission! Please log in first!!!`)
}
}
})
DocNoteConfig({
submitConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`You don't have permission! Please log in first!!!`)
}
}
})
DocNoteConfig({
editConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`Oh, no! You don't have 'edit' permission! Please log in first!!!`)
}
},
addConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`Oh, no! You don't have 'add' permission! Please log in first!!!`)
}
},
removeConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`Oh, no! You don't have 'remove' permission! Please log in first!!!`)
}
},
submitConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`Oh, no! You don't have 'submit' permission! Please log in first!!!`)
}
},
contentNames: {
cancel: '取消',
confirm: '确定',
explain: '确定删除?',
},
languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)'],
theme: 'default',
})
- Download dependency
npm i doc-note -S
- Register components
import { DocNote, DocNoteConfig } from 'doc-note'
DocNoteConfig()
createApp(App).use(DocNote).mount('#app')
* Umnoteconfig configuration
- Used in .vue files
<template>
<doc-note :codes="code"/>
</template>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const code = ref(`const helloWord = 'Hello, doc-note!'`)
return {
code,
}
}
})
-- props --
Params | Description | Type | Default |
---|
width | Width of component. *Must bring unit. | string | '100%' |
height | Height of component. *Must bring unit. | string | 'auto' |
editable | Whether to turn on the editable function. If the value of editable is false, the edit switch in the upper right corner of the component is hidden. | boolean | false |
foldable | Whether to turn on the folding function. If the value of foldable is false, the unfold attribute will become invalid and the component will remain unfold. | boolean | true |
unfold | Whether to unfold components by default. | boolean | false |
*codes | Code to show. View the format of attribute codes. | string | object | array | [] |
language | The default language of the component. | string | 'javascript' |
-- event --
Name | Description | CB Arguments | Arg Type | Arg Description |
---|
submit | Callback function when component submits operation. Full sample demo | submitInfo | object | Content information currently submitted and method of initializing editing status. |
Type | Format | Example |
---|
string | - | `const value = 'Hello Word!'` |
object | { language : [ string | Optional | Default: 'javascript' ], code : [ string | Optional | Default: '' ] } | { language : 'javascript', code : `const value = 'Hello Word!'` } |
array | [ { language : [ string | Optional | Default: 'javascript' ], code : [ string | Optional | Default: '' ] }, ...... ] | [ { language : 'html', code : `<div>{{ msg }}<div>` }, { language : 'javascript', code : `const msg = 'Hello Word!'` }, ...... ] |
Props of submitinfo | Type | Description |
---|
data | array | Data to be submitted. [ { code : [ Original display code | string ], language : [ Actual code language | string ], processedCode : [ Processed code by prismjs | string ], showingLanguage : [ Language of presentation | string ] }, ...... ] |
close | function | Initialize the edit state of the component to the 'not edited' state. |
- DocNoteConfig * Umnoteconfig must be called before the component is mounted
Name | Type | Description | CB Arguments | Arg Type | Arg Description |
---|
DocNoteConfig | function | Configure the theme, supported language, permissions, etc. of doc-note. | Configure | object | Configuration object of DocNoteConfig method |
Props of Configure | Type | Description | Default | CB Arguments | Arg Type | Arg Description |
---|
theme | string | Configure topics for doc-note. [All themes]. [Example]. | 'default' | - | - | - |
languages | array | Configure languages supported for 'doc-note'. [All supported languages]. [Example] | ['html', 'javascript', 'css'] | - | - | - |
contentNames | object | Configure the relevant text description in the delete code block pop-up box for 'doc-note'. [Example] | undefined | - | - | - |
editConfigure | function | Configure edit permissions for 'doc-note'. [Example] | undefined | next | function | Continue to the next step. |
addConfigure | function | Configure add code block permissions for 'doc-note'. [Example] | undefined | next | function | Continue to the next step. |
removeConfigure | function | Configure delete code block permission for 'doc-note'. [Example] | undefined | next | function | Continue to the next step. |
submitConfigure | function | Configure submit permissions for 'doc-note'. [Example] | undefined | next | function | Continue to the next step. |
$ - Configuration example
- Configure theme
console.log(Prism.allThemes)
DocNoteConfig({
theme: 'okaidia'
})
- Configuration language
console.log(Prism.allLanguages)
console.log(Prism.hasLanguage('html'))
DocNoteConfig({
languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)']
})
DocNoteConfig({
contentNames: {
cancel: 'cancel',
confirm: 'done',
explain: 'Are you sure to delete??',
}
})
DocNoteConfig({
editConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`You don't have permission! Please log in first!!!`)
}
}
})
DocNoteConfig({
addConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`You don't have permission! Please log in first!!!`)
}
}
})
DocNoteConfig({
removeConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`You don't have permission! Please log in first!!!`)
}
}
})
DocNoteConfig({
submitConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`You don't have permission! Please log in first!!!`)
}
}
})
DocNoteConfig({
editConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`Oh, no! You don't have 'edit' permission! Please log in first!!!`)
}
},
addConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`Oh, no! You don't have 'add' permission! Please log in first!!!`)
}
},
removeConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`Oh, no! You don't have 'remove' permission! Please log in first!!!`)
}
},
submitConfigure (next) {
if (store.getters.isLogin) {
next()
} else {
alert(`Oh, no! You don't have 'submit' permission! Please log in first!!!`)
}
},
contentNames: {
cancel: '取消',
confirm: '确定',
explain: '确定删除?',
},
languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)'],
theme: 'default',
})