codemirror实现一个markdown编辑器和html预览效果代码-html代码-BFW代码库

codemirror实现一个markdown编辑器和html预览效果代码

代码语言：html

所属分类：其他

代码描述：codemirror实现一个markdown编辑器和html预览效果代码，利用marked.js实时转换成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

    Code blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.

You can also make `inline code` to add code into other things.

### Quote

> Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.

## Headings

There are six levels of headings. They correspond with the six levels of HTML headings. You've probably noticed them already in the page. Each level down uses one more hash character.

### Headings *can* also contain **formatting**

### They can even contain `inline code`

Of course, demonstrating what headings look like messes up the structure of the page.

I don't recommend using more than three or four levels of headings here, because, when you're smallest heading isn't too small, and you're largest heading isn't too big, and you want each size up to look noticeably larger and more important, there there are only so many sizes that you can use.

## URLs

URLs can be made in a handful of ways:

* A named link to [MarkItD.........完整代码请登录后点击上方下载按钮下载查看