npm i um-note -S

// main.js
import { UmNote, UmNoteConfig } from 'um-note'

// UmNoteConfig是um-note组件的配置方法, 相当于初始化方法, 必须在createApp(App).use(UmNote)之前执行.
UmNoteConfig()

createApp(App).use(UmNote).mount('#app')

import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const code = ref(`const helloWord = 'Hello, um-note!'`)

    return {
      code,
    }
  }
})

// 本组件一共可支持8中主题, 分别是: 'default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight'
// 可通过全局属性Prism.allThemes来获取所有支持的主题
console.log(Prism.allThemes) // ['default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight']

UmNoteConfig({
  theme: 'okaidia'
})

// 本组件一共可支持270+种语言
// 可通过全局属性Prism.allLanguages来获取所有支持的语言
console.log(Prism.allLanguages) // ['html', 'javascript', 'css', ...]

// 可通过全局方法Prism.hasLanguage来判断某种语言是否被支持
/**
 * 检测语言是否被支持
 * 
 * @param {String} 被检测的语言字符串
 * 
 * @returns {Boolean} 
 */
console.log(Prism.hasLanguage('html')) // true

UmNoteConfig({
  languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)']
})

UmNoteConfig({
  contentNames: {
    cancel: 'cancel', // 取消按钮展示文本
    confirm: 'done', // 确定按钮展示文本
    explain: 'Are you sure to delete??', // 删除弹框内容展示文本
  }
})

UmNoteConfig({
  // 如果不想配置edit权限, 请不要设置editConfigure, 或者在editConfigure内部直接调用next()方法
  editConfigure (next) {
    if (store.getters.isLogin) { // 如果用户已登录
      next() // 继续下一步
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

UmNoteConfig({
  // 如果不想配置add权限, 请不要设置addConfigure, 或者在addConfigure内部直接调用next()方法
  addConfigure (next) {
    if (store.getters.isLogin) { // 如果用户已登录
      next() // 继续下一步
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

UmNoteConfig({
  // 如果不想配置remove权限, 请不要设置removeConfigure, 或者在removeConfigure内部直接调用next()方法
  removeConfigure (next) {
    if (store.getters.isLogin) { // 如果用户已登录
      next() // 继续下一步
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

UmNoteConfig({
  // 如果不想配置submit权限, 请不要设置submitConfigure, 或者在submitConfigure内部直接调用next()方法
  submitConfigure (next) {
    if (store.getters.isLogin) { // 如果用户已登录
      next() // 继续下一步
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

UmNoteConfig({
  /**
   * 权限配置-使页面可被编辑
   * 
   * @param {Function} next 继续下一步
   */
  editConfigure (next) { // 如果不想配置edit权限, 请不要设置editConfigure, 或者在editConfigure内部直接调用next()方法
    if (store.getters.isLogin) { // 如果用户已登录
      next()
    } else {
      alert(`Oh, no! You don't have 'edit' permission! Please log in first!!!`)
    }
  },
  /**
   * 权限配置-添加代码块
   * 
   * @param {Function} next 继续下一步
   */
  addConfigure (next) { // 如果不想配置add权限, 请不要设置addConfigure, 或者在addConfigure内部直接调用next()方法
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'add' permission! Please log in first!!!`)
    }
  },
  /**
   * 权限配置-删除代码块
   * 
   * @param {Function} next 继续下一步
   */
  removeConfigure (next) { // 如果不想配置remove权限, 请不要设置removeConfigure, 或者在removeConfigure内部直接调用next()方法
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'remove' permission! Please log in first!!!`)
    }
  },
  /**
   * 权限配置-确认编辑的代码
   * 
   * @param {Function} next 继续下一步
   */
  submitConfigure (next) { // 如果不想配置submit权限, 请不要设置submitConfigure, 或者在submitConfigure内部直接调用next()方法
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'submit' permission! Please log in first!!!`)
    }
  },
  /**
   * 配置删除代码块弹框内的文字描述
   * 
   * {Object} contentNames
   * {String} contentNames.cancel 取消按钮描述
   * {String} contentNames.confirm 确定按钮描述
   * {String} contentNames.explain 弹框内容描述
   */
  contentNames: {
    cancel: '取消',
    confirm: '确定',
    explain: '确定删除?',
  },
  /**
   * 配置添加代码块时可选择的语言
   * 
   * {Array} languages
   * 你可以通过 console.log(Prism.allLanguages) 打印出所有被支持的语言, 返回一个数组
   * 你可以通过 console.log(Prism.hasLanguage(<languageName>)) 打印出 <languageName> 语言是否被支持, 返回 true 或 false
   */
  languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)'],
  /**
   * 配置主题
   * 
   * {String} theme
   * 可配置主题一共有8种: ['default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight']
   */
  theme: 'default',
})

npm i um-note -S

// main.js
import { UmNote, UmNoteConfig } from 'um-note'

// Umnoteconfig is the configuration method of um-note components, Equivalent to initialization method, Must be executed before createapp(APP).use(UmNote).
UmNoteConfig()

createApp(App).use(UmNote).mount('#app')

import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const code = ref(`const helloWord = 'Hello, um-note!'`)

    return {
      code,
    }
  }
})

// um-note supports a total of 8 themes: 'default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight'
// All supported topics can be obtained through the global attribute Prism.allThemes
console.log(Prism.allThemes) // ['default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight']

UmNoteConfig({
  theme: 'okaidia'
})

// um-note can support 270+ languages
// All supported languages can be obtained through the global attribute Prism.allLanguages
console.log(Prism.allLanguages) // ['html', 'javascript', 'css', ...]

// The global method Prism.hasLanguage can be used to determine whether a language is supported
/**
 * Check whether the language is supported
 * 
 * @param {String} language to be detected
 * 
 * @returns {Boolean} 
 */
console.log(Prism.hasLanguage('html')) // true

UmNoteConfig({
  languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)']
})

UmNoteConfig({
  contentNames: {
    cancel: 'cancel', // text of cancel butto
    confirm: 'done', // text of confirm butto
    explain: 'Are you sure to delete??', // text of delete popup
  }
})

UmNoteConfig({
  // If you do not want to configure 'edit' permission, please do not set 'editconfiguration', or directly call the 'next()' method inside 'editconfiguration'
  editConfigure (next) {
    if (store.getters.isLogin) { // If the user is logged in
      next() // Continue to the next step
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

UmNoteConfig({
  // If you do not want to configure 'add' permission, please do not set 'addConfigure', or directly call the 'next()' method inside 'addConfigure'
  addConfigure (next) {
    if (store.getters.isLogin) { // If the user is logged in
      next() // Continue to the next step
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

UmNoteConfig({
  // If you do not want to configure 'remove' permission, please do not set 'removeConfigure', or directly call the 'next()' method inside 'removeConfigure'
  removeConfigure (next) {
    if (store.getters.isLogin) { // If the user is logged in
      next() // Continue to the next step
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

UmNoteConfig({
  // If you do not want to configure 'submit' permission, please do not set 'submitConfigure', or directly call the 'next()' method inside 'submitConfigure'
  submitConfigure (next) {
    if (store.getters.isLogin) { // If the user is logged in
      next() // Continue to the next step
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

UmNoteConfig({
  /**
   * Permission configuration-Make the page editable
   * 
   * @param {Function} next Continue to the next step
   */
  editConfigure (next) { // If you do not want to configure 'edit' permission, please do not set 'editconfiguration', or directly call the 'next()' method inside 'editconfiguration'
    if (store.getters.isLogin) { // If the user is logged in
      next()
    } else {
      alert(`Oh, no! You don't have 'edit' permission! Please log in first!!!`)
    }
  },
  /**
   * Permission configuration-Add code block
   * 
   * @param {Function} next Continue to the next step
   */
  addConfigure (next) { // If you do not want to configure 'add' permission, please do not set 'addConfigure', or directly call the 'next()' method inside 'addConfigure'
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'add' permission! Please log in first!!!`)
    }
  },
  /**
   * Permission configuration-Delete code block
   * 
   * @param {Function} next Continue to the next step
   */
  removeConfigure (next) { // If you do not want to configure 'remove' permission, please do not set 'removeConfigure', or directly call the 'next()' method inside 'removeConfigure'
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'remove' permission! Please log in first!!!`)
    }
  },
  /**
   * Permission configuration-Confirm edited code
   * 
   * @param {Function} next Continue to the next step
   */
  submitConfigure (next) { // If you do not want to configure 'submit' permission, please do not set 'submitConfigure', or directly call the 'next()' method inside 'submitConfigure'
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'submit' permission! Please log in first!!!`)
    }
  },
  /**
   * Configure the text description in the delete code block pop-up box
   * 
   * {Object} contentNames
   * {String} contentNames.cancel text of cancel butto
   * {String} contentNames.confirm text of confirm butto
   * {String} contentNames.explain text of delete popup
   */
  contentNames: {
    cancel: '取消',
    confirm: '确定',
    explain: '确定删除?',
  },
  /**
   * Configure the language that can be selected when adding code blocks
   * 
   * {Array} languages
   * You can print out all supported languages through 'console.log(Prism.allLanguages)', return an array
   * You can print out whether the '<languename>' language is supported through 'console.log(Prism.hasLanguage(<languageName>))', return true or false
   */
  languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)'],
  /**
   * Configure theme
   * 
   * {String} theme
   * There are 8 configurable themes: ['default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight']
   */
  theme: 'default',
})