How to use HTML+CSS to do real-time preview markdown editor
This article mainly explains "how to use HTML+CSS to do real-time preview markdown editor", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use HTML+CSS to do real-time preview markdown editor" it!
Markdown Editor
* {margin:0;padding:0;outline:none;border-radius:0
}
Html,body {width:100%;height:100%;font-family: "HelveticaNeue", 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;position:relative;background-color:#fff
}. Pull-left {float:left
}
. pull-right {float:right
}
The second step is to introduce resources to achieve preliminary results:
1. Create a js folder under the project
two。 Unpack the marked.js under marked/lib from the downloaded package to the js folder
3. Unpack ace-builds/src from the downloaded package to the js folder and rename it to ace
4. Import js file
(note: markdown.css is a markdown style file, which can be written or downloaded from the Internet, such as github-markdown-css.)
Markdown Editor
5 initialize the plug-in
(add edit area and display area code first)
# mdeditor#preview,#panel-editor,#panel-preview {
Height:100%
Width:100%
}
(add initialization code first)
Varacen_edit=ace.edit ('mdeditor')
Acen_edit.setTheme ('ace/theme/chrome')
Acen_edit.getSession () .setMode ('ace/mode/markdown')
Acen_edit.renderer.setShowPrintMargin (false)
$("# mdeditor") .keyup (function () {
$("# preview") .html (marked (acen_edit.getValue ()
})
Step 3: add a tool to the toolbar example:
1. Write common methods
(in fact, the click tool is mainly to automatically insert the originally hand-typed symbols in the editor)
FunctioninsertText (val) {
Acen_edit.insert (val); / / insert at cursor position
}
Thickening
Italic
Citation
.
Step 4: ace.jsAPI implements the editor setting function:
Thickening
Italic
Quote. Set up:
Chrome
Clouds
CrimsonEditor
Dawn
Dreamweaver
Eclipse
GitHub
IPlastic
SolarizedLight
TextMate
Tomorrow
XCode
Kuroir
KatzenMilch
SQLServer
Ambiance
Chaos
CloudsMidnight
Cobalt
Gruvbox
IdleFingers
KrTheme
Merbivore
MerbivoreSoft
MonoIndustrial
Monokai
Pastelondark
SolarizedDark
Terminal
TomorrowNight
TomorrowNightBlue
TomorrowNightBright
TomorrowNight80s
Twilight
VibrantInk
Font size
10px
11px
12px
13px
14px
16px
18px
20px
24px
Code break
Manual
Markbegin
Markbeginandend
Automatic line wrapping
Off
40Chars
80Chars
Free
Select all style cursor line highlight display line number print margin
.
$("# theme") .change (function () {
Acen_edit.setTheme ($(this) .val ()
})
$("# fontsize") .change (function () {
Acen_edit.setFontSize ($(this) .val ()
})
$("# folding") .change (function () {
Session.setFoldStyle ($(this) .val ()
})
$("# select_style") .change (function () {
Acen_edit.setOption ("selectionStyle", this.checked? "line": "text")
})
$("# highlight_active") .change (function () {
Acen_edit.setHighlightActiveLine (this.checked)
})
$("# soft_wrap") .change (function () {
Acen_edit.setOption ("wrap", $(this) .val ())
})
$("# show_print_margin") .change (function () {
Acen_edit.renderer.setShowPrintMargin (this.checked)
})
Thank you for reading, the above is the content of "how to use HTML+CSS to do real-time preview of markdown editor". After the study of this article, I believe you have a deeper understanding of how to use HTML+CSS to do real-time preview of markdown editor. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
