codemirror实现一个markdown编辑器和html预览效果代码
代码语言:html
所属分类:其他
代码描述:codemirror实现一个markdown编辑器和html预览效果代码,利用marked.js实时转换成html代码
代码标签: markdown 编辑器 和 html 预览 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='//repo.bfw.wiki/bfwrepo/js/codemirror/lib/codemirror.css'>
<link rel='stylesheet' href='//repo.bfw.wiki/bfwrepo/js/codemirror/theme/material.css'>
<style>
/* helpers/grid.css */
.grid {
width: 100%;
}
.grid__row {
display: flex;
}
.grid__col {
flex-grow: 1;
}
.grid__col--4 {
width: calc(100% / 3);
}
/* layout/base.css */
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
height: 100%;
}
body {
font-family: sans-serif;
line-height: 1.5;
margin: 0;
min-height: 100%;
}
/* modules/code.css */
.pre {
height: 100vh;
}
/* modules/embed.css */
iframe {
border: 0;
height: 100%;
width: 100%;
}
/* modules/form.css */
textarea {
background: none;
border: 0;
height: 100vh;
margin: 0;
padding: 0.5em;
width: 100%;
}
/* vendor/codemirror.css */
.CodeMirror {
height: 100vh;
}
.CodeMirror-readonly .CodeMirror-cursor {
display: none;
}
</style>
</head>
<body translate="no" >
<div class="grid">
<div class="grid__row">
<div class="grid__col grid__col--4">
<textarea class="js-input"># An exhibit of Markdown
This note demonstrates some of what [Markdown][1] is capable of doing.
*Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself.*
## Basic formatting
Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.
Paragraphs must be separated by a blank line. Basic formatting of *italics* and **bold** is supported. This *can be **nested** like* so.
## Lists
### Ordered list
1. Item 1
2. A second item
3. Number 3
4. Ⅳ
*Note: the fourth item uses the Unicode character for [Roman numeral four][2].*
### Unordered list
* An item
* Another item
* Yet another item
* And there's more...
## Paragraph modifiers
### Code block
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0