前端md转html添加样式_纯前端打造一个简易实时预览的markdown编辑器

第一步 搭建布局:

1.构思布局(以下是总体布局)

总体样式.png

2.项目下新建个index.html页面,写入以下代码:

markdown编辑器

* {

margin: 0;

padding: 0;

outline: none;

border-radius: 0;

}

html,

body {

width: 100%;

height: 100%;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

background-color: #ebebeb;

}

#toolbar {

height: 50px;

background-color: #444;

width: 100%;

color: #fff;

line-height: 50px;

}

#container {

overflow: auto;

position: absolute;

bottom: 0;

left: 0;

right: 0;

top: 50px;

}

#editor-column,

#preview-column {

width: 49.5%;

height: 100%;

overflow: auto;

posit