iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
2

今天會擴充套件 codemirror 和 vue-codemirror。
使我們在部落格中編輯或發佈文章時,
輸入的 markdown 是會有高亮的,
這篇是為了之後開發到的元件(FormAddPost)做準備。

codemirror 簡介

CodeMirror 是一個基於 javascript 的多功能的文字編輯器,可在瀏覽器中執行。
CodeMirror 提供程式碼的高亮和縮排等功能。

vue-codemirror 簡介

vue-codemirror 是一個將 codemirror 包裝過後的元件,
可讓我們在 Vue 中較輕鬆的使用 codemirror。

vue-codemirror 官方 DEMO

截圖:

vue-codemirror demo

npm 安裝 codemirror 和 vue-codemirror

npm i codemirror vue-codemirror

plugins 撰寫

plugins/codemirror/index.js

import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'

import 'codemirror/mode/markdown/markdown.js'

Vue.use(VueCodemirror)

nuxt 引入 codemirror plugin

nuxt.config.js

plugins: [
  ...,
  { src: '@/plugins/codemirror', ssr: false }
],
css: [
  'codemirror/lib/codemirror.css',
  'codemirror/theme/monokai.css'
]

storybook 引入 codemirror plugin

.storybook/config

import '@/plugins/codemirror'

import '!!style-loader!css-loader!codemirror/lib/codemirror.css'
import '!!style-loader!css-loader!codemirror/theme/monokai.css'

使用

template

這邊必須使用 no-ssr

018-002

script

export default {
	data: {
		codemirrorOptions: {
			tabSize: 4,
			mode: 'markdown',
			theme: 'monokai',
			lineNumbers: true,
			lineWrapping: true
		}
	}
}

程式碼放在以下 branch:

今天和明天都沒有 DEMO,會一起預後天的元件 FormAddPost 補上完整 DEMO。

018-vue-codemirror-plugin

指令:

git clone -b 018-vue-codemirror-plugin --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install

上一篇
#17 元件開發: ThePostPreview (default & admin 模式)
下一篇
#19: 為何我選擇 simple-vue-validator?
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30

尚未有邦友留言

立即登入留言