• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

luogu-dev/markdown-palettes: Markdown*Palettes: Markdown editor for the modern w ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

luogu-dev/markdown-palettes

开源软件地址(OpenSource Url):

https://github.com/luogu-dev/markdown-palettes

开源编程语言(OpenSource Language):

JavaScript 64.3%

开源软件介绍(OpenSource Introduction):

Markdown*Palettes

Markdown*Palettes is an open-source Markdown editor for the modern web.

Usage

We have four bundle schemes. Choose what you prefer. Note that to use Markdown*Palettes, your web page must be in standard mode and use UTF-8 encoding. e.g.:

<!DOCTYPE html>
<meta charset="utf-8">

With Build Tools (webpack, rollup, etc)

First install our npm package:

$ yarn add markdown-palettes

Since Markdown*Palettes is a Vue component, we assume you're familiar with Vue.

Use the ES6 Module

If you use webpack v2+ or rollup, you can use the ES6 module:

<template>
  <div style="height: 700px;">
    <markdown-palettes v-model="value"/>
  </div>
</template>
<script>
  import MarkdownPalettes from 'markdown-palettes'
  export default {
    components: [MarkdownPalettes],
    data: () => { value: 'Hello, **Markdown*Palettes**!' }
  }
</script>

Note that the ES6 module didn't resolve its dependencies and pack them inside. It doesn't matter if you configure your webpack or rollup to resolve into node_modules, which is the common practice. As a fallback, you can use the CommonJS module.

Use the CommonJS Module

Replacing the ES6 'import' statement with CommonJS 'require' function:

const MarkdownPalettes = require('markdown-palettes')
require('markdown-palettes/dist/MarkdownPalettes.css')

The CommonJS module resolved its dependencies and packed them inside.

Without Build Tools (use directly in HTML)

It's OK to use Markdown*Palettes without build tools, if you're not so familiar with Vue and Node.js toolchain. Copy the items in dist directory into your project.

Use with Vue

This is recommended if you use other Vue components in your HTML page.

<link rel="stylesheet" href="MarkdownPalettes.css">
<div id="editor-container" style="height: 700px;">
  <markdown-palettes v-model="value"></markdown-palettes>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="MarkdownPalettes.umd.min.js"></script>
<script>
  var app = new Vue({
    el: '#editor-container',
    components: { MarkdownPalettes },
    data: () => { value: 'Hello, **Markdown*Palettes**!' }
  })
</script>

Use without Vue

This is suitable if you don't have other Vue components in your HTML page or you 'dislike' Vue. Note that this bundle includes Vue inside so it's larger.

<link rel="stylesheet" href="markdown-palettes.css">
<script src="markdown-palettes.js"></script>
<div id="editor-container" style="height: 700px;">
  <div id="editor"></div>
</div>
<script>
  var markdownEditor = new MarkdownPalettes("#editor");
  markdownEditor.contenet = "**content**";
  var code = markdownEditor.content;
</script>

External Resources

By default bundle don't contain syntax highlighting for programming languages. If you use the bundles other than ES6 module, unfortunately you have to build it by yourself to get extra language support. If you use ES6 module, you can easily import them:

// register languages for hljs
import hljs from 'highlight.js/lib/highlight'
import cpp from 'highlight.js/lib/languages/cpp'
hljs.registerLanguage('cpp', cpp)

// register languages for CodeMirror
import 'codemirror/mode/clike/clike'

Documentation

TODO

Development

First checkout this repo.

$ yarn          # install dependencies
$ yarn dev      # start dev server
$ yarn build    # build dist

Release

Please upload dist directory to npm together.

Credits

Developed by @darkflames and @lin_toto of the Luogu Dev Team




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
norwoodj/helm-docs: A tool for automatically generating markdown documentation f ...发布时间:2022-08-18
下一篇:
storybookjs/marksy: 发布时间:2022-08-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap