Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.