Use HTML+CSS to create a real-time preview markdown editor
This time I will bring you a markdown editor with real-time preview using HTML+CSS. What are the precautions for using HTML+CSS to make a markdown editor with real-time preview? Here is a practical case, let’s take a look.
The first step to build the layout:
1. Conceive the layout (the following is the overall layout)
2. Create a new index.html page under the project and write the following code:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>markdown编辑器</title>
<style type="text/css">
* {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;position: relative;background-color: #fff;
}.pull-left {float: left;
}
.pull-right {float: right;
}</style>
</head>
<body>
<div id="toolbar"></div>
<div id="container">
<div id="editor-column" class="pull-left">
<div id="panel-editor">
</div>
</div>
<div id="preview-column" class="pull-right">
<div id="panel-preview">
</div>
</div>
</div>
</body></html>The second step is to introduce resources to achieve the initial effect:
1. Create a js folder under the project
2. Extract marked.js under marked/lib from the downloaded compressed package to the js folder
3. Extract ace-builds/src from the downloaded compressed package to the js file Rename the folder to ace
4. Introduce the js file
(Note: markdown.css is a markdown style file, you can write it yourself or download it from the Internet, such as: github-markdown-css)
<!DOCTYPE html><html>
<head>
<meta charset='UTF-8'>
<title>markdown编辑器</title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/marked.js"></script>
<script src="js/ace/ace.js"></script>
<link href="markdown.css" rel="stylesheet" />
<!--略-->5Initialization plug-in
(Add the editing area and display area code first)
<!--略-->#mdeditor#preview,#panel-editor,#panel-preview{
height: 100%;
width: 100%;
}</style>
</head>
<body>
<div id='toolbar'></div>
<div id='container'><div id='editor-column' class='pull-left'>
<div id='panel-editor'>
<!--编辑区-->
<div class="editor-content" id="mdeditor" ></div>
</div>
</div>
<div id='preview-column' class='pull-right'>
<div id='panel-preview'>
<!--显示区-->
<div id="preview" class="markdown-body"></div>
</div>
</div>
<!--略-->(Add the initialization code first)
<!--略-->
var acen_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()));
});The third step is to add tools to the toolbar. Example:
1. Write public methods
(In fact, clicking on the tool mainly automatically inserts the original hand-typed symbols in the editor)
function insertText(val){
acen_edit.insert(val);//光标位置插入
}
<div id='toolbar'>
<button onclick="insertText('**?**')">加粗</button>
<button onclick="insertText('_?_')">斜体</button>
<button onclick="insertText('>')">引用</button>
.....</div>The fourth step ace.js API implements the editor setting function:
<div id='toolbar'>
<button onclick="insertText('**?**')">加粗</button>
<button onclick="insertText('_?_')">斜体</button>
<button onclick="insertText('>')">引用</button>..... 设置: <select id="theme" size="1">
<optgroup label="Bright">
<option value="ace/theme/chrome">Chrome</option>
<option value="ace/theme/clouds">Clouds</option>
<option value="ace/theme/crimson_editor">Crimson Editor</option>
<option value="ace/theme/dawn">Dawn</option>
<option value="ace/theme/dreamweaver">Dreamweaver</option>
<option value="ace/theme/eclipse">Eclipse</option>
<option value="ace/theme/github">GitHub</option>
<option value="ace/theme/iplastic">IPlastic</option>
<option value="ace/theme/solarized_light">Solarized Light</option>
<option value="ace/theme/textmate">TextMate</option>
<option value="ace/theme/tomorrow">Tomorrow</option>
<option value="ace/theme/xcode">XCode</option>
<option value="ace/theme/kuroir">Kuroir</option>
<option value="ace/theme/katzenmilch">KatzenMilch</option>
<option value="ace/theme/sqlserver">SQL Server</option>
</optgroup>
<optgroup label="Dark">
<option value="ace/theme/ambiance">Ambiance</option>
<option value="ace/theme/chaos">Chaos</option>
<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
<option value="ace/theme/cobalt">Cobalt</option>
<option value="ace/theme/gruvbox">Gruvbox</option>
<option value="ace/theme/idle_fingers">idle Fingers</option>
<option value="ace/theme/kr_theme">krTheme</option>
<option value="ace/theme/merbivore">Merbivore</option>
<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
<option value="ace/theme/mono_industrial">Mono Industrial</option>
<option value="ace/theme/monokai">Monokai</option>
<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
<option value="ace/theme/solarized_dark">Solarized Dark</option>
<option value="ace/theme/terminal">Terminal</option>
<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
<option value="ace/theme/twilight">Twilight</option>
<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
</optgroup>
</select>字体大小 <select id="fontsize" size="1">
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px" selected="selected">12px</option>
<option value="13px">13px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
</select>代码折行 <select id="folding" size="1">
<option value="manual">manual</option>
<option value="markbegin" selected="selected">mark begin</option>
<option value="markbeginend">mark begin and end</option>
</select>自动换行 <select id="soft_wrap" size="1">
<option value="off">Off</option>
<option value="40">40 Chars</option>
<option value="80">80 Chars</option>
<option value="free">Free</option>
</select>全选样式 <input type="checkbox" name="select_style" id="select_style" checked="">光标行高光 <input type="checkbox" name="highlight_active" id="highlight_active" checked="">显示行号 <input type="checkbox" id="show_gutter" checked="">打印边距 <input type="checkbox" id="show_print_margin" checked=""></div><!---略--->
......
$("#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);
})
I believe you have mastered the method after reading the case in this article. Please pay attention to php for more exciting information Other related articles on the Chinese website!
Related reading:
10 application examples of js regular expressions
Vue.js 2.0 background system practice Case
The above is the detailed content of Use HTML+CSS to create a real-time preview markdown editor. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How Vue3 parses markdown and implements code highlighting
May 20, 2023 pm 04:16 PM
Vue implements the blog front-end and needs to implement markdown parsing. If there is code, it needs to implement code highlighting. There are many markdown parsing libraries for Vue, such as markdown-it, vue-markdown-loader, marked, vue-markdown, etc. These libraries are all very similar. Marked is used here, and highlight.js is used as the code highlighting library. The specific implementation steps are as follows: 1. Install dependent libraries. Open the command window under the vue project and enter the following command npminstallmarked-save//marked to convert markdown into htmlnpmins
How to build a Markdown editor in Python
May 13, 2023 am 09:58 AM
First, make sure you have Python3 and Tkinter installed. Other things we need are tkhtmlview and markdown2. You can install them by running pipinstalltkhtmlviewmarkdown2 or pip3installtkhtmlviewmarkdown2 (if you have multiple Python versions). Now launch your favorite editor or IDE and create a new file (for example www.linuxidc.com.py (I named it linuxidc.com editor)). We'll start by importing the necessary libraries. fromtkinterimport*fro
Let's talk about how to configure Markdown in VScode (with basic syntax)
Dec 07, 2022 pm 03:40 PM
How to use markdown in VScode? The following article will introduce you to the method of configuring Markdown in VScode, and talk about the basic syntax of Markdown. I hope it will be helpful to you!
How to use PHP to implement markdown conversion
Mar 24, 2023 pm 02:30 PM
As people continue to pursue technology, more and more tools and applications are developed to help people simplify complex tasks. One of them is Markdown, which is a lightweight markup language that converts plain text into HTML-formatted text. This article will introduce how to use PHP to implement Markdown conversion.
How to use Markdown in ThinkPHP6
Jun 20, 2023 pm 11:00 PM
In the development of the modern Internet era, document writing has gradually changed from cumbersome HTML tags to the simpler and easier to read and write Markdown syntax. ThinkPHP6 uses a highly flexible template engine and provides convenient Markdown extensions, making it very easy to write and display Markdown files in projects. What is Markdown Markdown is a lightweight markup language that can quickly convert documents written in plain text into HTML for use in
After using this Linux command, my boss directly put my name on the salary increase list.
Feb 27, 2024 pm 08:49 PM
Overview In Linux systems, we frequently use the command line to process files and directories. Markdown is a concise markup language for quickly creating and formatting documents. But reading and managing Markdown files may require a large number of commands and parameters, which may be a bit complicated for beginners. At this time, you can use the glow command to simplify the operation. glow is a command line tool designed to simplify rendering Markdown files in the Linux terminal. Its main goal is to provide users with a more intuitive and manageable Markdown file reading experience. glow comes with a user-friendly graphical interface that allows you to view and manage Markdown files more easily. With this interface, you don’t need to remember
A must-have Markdown cheat sheet for programmers!
Feb 16, 2023 am 11:22 AM
This article brings you relevant knowledge about Markdown. The main content is to summarize and share with you a Markdown cheat sheet. Friends who are interested can take a look at it below. I hope it will be helpful to everyone.
Using Markdown for document management in Java API development
Jun 17, 2023 pm 11:39 PM
With the widespread application of Java, more and more developers are paying attention to how to better manage and maintain their own code bases. Among them, document management is an important issue that developers must face. For JavaAPI developers, using Markdown for document management is a good choice. This article will explain from the following three aspects why using Markdown for document management in Java API development is a wise decision. Markdown’s simplicity and ease of use Markd
