小白都能看得懂的教程 一本教你如何在前端實現markdown編輯器
大家好,我叫亓官劼(qí guān jié ) ,在博客中記錄學習的點滴歷程,一起加油~
博主博客文章內容導航(實時更新)
更多優質文章推薦:
- 收藏!最詳細的Python全棧開發指南 看完這篇你還不會Python全棧開發 你來打我!!!
- 一本教你如何在前端實現富文本編輯器
- 小白都能看得懂的教程 一本教你如何在前端實現markdown編輯器
- Flask學習(基本語法)
- 一文教會你Bootstrap,讓你也可以快速建站
- 一文教你如何白嫖JetBrains全家桶(IDEA/PtChram/CLion)免費正版
- 小白都能看懂的實戰教程 手把手教你Python Web全棧開發 (DAY 1)
- 小白都能看懂的實戰教程 手把手教你Python Web全棧開發 (DAY 2)
- 小白都能看懂的實戰教程 手把手教你Python Web全棧開發 (DAY 3)
- 小白都能看懂的實戰教程 手把手教你Python Web全棧開發 (DAY 4)
- 小白都能看懂的實戰教程 手把手教你Python Web全棧開發 (DAY 5)
- 小白都能看懂的實戰教程 手把手教你Python Web全棧開發 (DAY 6)
- 小白都能看懂的實戰教程 手把手教你Python Web全棧開發 (DAY 7)
Markdown是目前非常流行的一種標記語言,可以讓我們快速對文章進行排版,並且具有較好的格式,應用場景非常多,目前很多網站都已經支持Markdown輸入了。本文就將帶你實現一個Markdown編輯器。
在前端實現Markdown的話,我們有很多種方式,這裏我們使用一個開源的Markdown編輯器showdown
,這是一個開源的Markdown編輯器,我們可以使用他在前端快速的實現我們的Markdown編輯器的功能。
首先,我們去下載showdown的壓縮包,我們可以使用GitHub下載:showdown的GitHub下載地址,進入之後我們將這個項目clone到本地即可下載這個項目。
本文原創爲CSDN博主亓官劼,原文鏈接爲:小白都能看得懂的教程 一本教你如何在前端實現markdown編輯器,請大家支持原創,拒絕抄襲。
GitHub可能下載會比較慢,我們可以使用手機開熱點下載會快一點,或者使用(發揮下你的聰明才智)。
下載到本地是一個壓縮包,我們把它解壓,然後拖到我們的項目地址,如果不是項目的話,我們直接拖到一個你喜歡的文件夾中,然後記住他的位置即可。我這裏是在一個Flask項目裏進行試驗了,所以拖到了項目了(直接使用html也可以的,可以不使用項目)。
在下載完之後我們就實現這個Markdown編輯器到我們的html中。首先我們要在我們的html的head中引入我們剛剛下載的文件的dist文件夾中的showdown.min.js文件。我這裏的位置爲:
<script type="text/javascript" src="/static/showdown-1.9.1/dist/showdown.min.js"></script>
這裏的位置大家根據自己的實際情況繼續修改。下面我們就來使用這個showdown來實現Markdown文本編輯器的一個功能。
首先我們這裏使用一個<textarea>
作爲輸入框,然後使用一個<div>
來進行展示,這裏我們先測試功能,後面再進行一個美化(測試的時候界面很很很
醜)。
現在的UI部分爲:
<div class="markdown_class">
<div class="markdown_input">
<textarea id="markdown_input"></textarea>
</div>
<div class="markdown_output" id="markdown_output">
</div>
</div>
現在的前端長這樣,空蕩蕩的,啥也沒有。
然後我們來進行一個配置,使得我們每次在<textarea>
中輸入的內容能夠按照Markdown的語法進行轉化,並且在markdown_output
的div中進行展示出來。完整的代碼爲,在代碼中進行了相關功能的註釋。
本文原創爲CSDN博主亓官劼,原文鏈接爲:小白都能看得懂的教程 一本教你如何在前端實現markdown編輯器,請大家支持原創,拒絕抄襲。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Markdown實現</title>
<script type="text/javascript" src="/static/showdown-1.9.1/dist/showdown.min.js"></script>
</head>
<body>
<div class="markdown_class">
<div class="markdown_input">
<textarea id="markdown_input" onkeyup="show()"></textarea>
</div>
<div class="markdown_output" id="markdown_output">
</div>
</div>
<script type="text/javascript">
function show(){
//獲取markdown_input中的內容
var text = document.getElementById("markdown_input").value;
// 實例化一個converter,即轉化器
var converter = new showdown.Converter();
// 使用converter將text中的Markdown語法轉化爲html格式,並且在markdown_output中進行顯示
document.getElementById("markdown_output").innerHTML = converter.makeHtml(text);
}
</script>
</body>
</html>
這時當我們在textarea
中輸入Markdown文本時,將會在markdown_output
中進行顯示出來,這裏寫成了一個js的函數,我們設置每次在textarea
中進行keyup
時,即我們鬆開按鍵時,就更新一次markdown_output
的內容,以此來達到實時的展示效果。這時的效果圖爲:
到這裏大家都可以完成一個Markdown的實時編輯展示功能了!下面我們就來將這個瞅瞅的頁面美化一下吧(博主的有限的審美,大家可以自行的發揮)。
這裏我們將markdown_input
和markdown_output
設置爲大小一樣,並排放,上面再加個標題,就好看很多啦~(相對與現在)。這裏我們創建一個demo.css文件,用來設計這個樣式。這裏先上效果圖吧:
本文原創爲CSDN博主亓官劼,原文鏈接爲:小白都能看得懂的教程 一本教你如何在前端實現markdown編輯器,請大家支持原創,拒絕抄襲。
html代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Markdown實現</title>
<script type="text/javascript" src="/static/showdown-1.9.1/dist/showdown.min.js"></script>
<link rel="stylesheet" href="/static/demo.css">
</head>
<body>
<div class="markdown_class">
<div class="markdown_title">
<h1>Markdown文本編輯器</h1>
</div>
<div class="markdown_input">
<textarea id="markdown_input" onkeyup="show()"></textarea>
</div>
<div class="markdown_output" id="markdown_output">
</div>
</div>
<script type="text/javascript">
function show(){
//獲取markdown_input中的內容
var text = document.getElementById("markdown_input").value;
// 實例化一個converter,即轉化器
var converter = new showdown.Converter();
// 使用converter將text中的Markdown語法轉化爲html格式,並且在markdown_output中進行顯示
document.getElementById("markdown_output").innerHTML = converter.makeHtml(text);
}
</script>
</body>
</html>
css代碼:
.markdown_title{
text-align: center;
}
.markdown_class{
height: 900px;
width: 950px;
margin-left: 130px;
}
.markdown_output{
width: 450px;
height: 600px;
border: 2px slategrey solid;
position: relative;
float: right;
background-color: #eeeeee;
}
.markdown_input{
width: 450px;
height: 600px;
border: 2px slategrey solid;
float: left;
}
#markdown_input{
width: 450px;
height: 600px;
border: 2px slategrey solid;
}
到這裏樣式是沒問題了,可以進行實時的一個輸入和展示。但是我們發現這裏Markdown顯示的格式不是太好看,這裏我們可以再優化一下,這裏使用的是李笑來老師的一個Markdown顯示的風格。代碼爲:
.markdown-here-wrapper {
font-size: 16px;
line-height: 1.8em;
letter-spacing: 0.1em;
}
pre, code {
font-size: 14px;
font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;
margin: auto 5px;
}
code {
white-space: pre-wrap;
border-radius: 2px;
display: inline;
}
pre {
font-size: 15px;
line-height: 1.4em;
display: block; !important;
}
pre code {
white-space: pre;
overflow: auto;
border-radius: 3px;
padding: 1px 1px;
display: block !important;
}
strong, b{
color: #BF360C;
}
em, i {
color: #009688;
}
hr {
border: 1px solid #BF360C;
margin: 1.5em auto;
}
p {
margin: 1.5em 5px !important;
}
table, pre, dl, blockquote, q, ul, ol {
margin: 10px 5px;
}
ul, ol {
padding-left: 15px;
}
li {
margin: 10px;
}
li p {
margin: 10px 0 !important;
}
ul ul, ul ol, ol ul, ol ol {
margin: 0;
padding-left: 10px;
}
ul {
list-style-type: circle;
}
dl {
padding: 0;
}
dl dt {
font-size: 1em;
font-weight: bold;
font-style: italic;
}
dl dd {
margin: 0 0 10px;
padding: 0 10px;
}
blockquote, q {
border-left: 2px solid #009688;
padding: 0 10px;
color: #777;
quotes: none;
margin-left: 1em;
}
blockquote::before, blockquote::after, q::before, q::after {
content: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-style: bold !important;
color: #009688 !important;
text-align: center !important;
margin: 1.5em 5px !important;
padding: 0.5em 1em !important;
}
h1 {
font-size: 24px !important;
border-bottom: 1px solid #ddd !important;
}
h2 {
font-size: 20px !important;
border-bottom: 1px solid #eee !important;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
table {
padding: 0;
border-collapse: collapse;
border-spacing: 0;
font-size: 1em;
font: inherit;
border: 0;
margin: 0 auto;
}
tbody {
margin: 0;
padding: 0;
border: 0;
}
table tr {
border: 0;
border-top: 1px solid #CCC;
background-color: white;
margin: 0;
padding: 0;
}
table tr:nth-child(2n) {
background-color: #F8F8F8;
}
table tr th, table tr td {
font-size: 16px;
border: 1px solid #CCC;
margin: 0;
padding: 5px 10px;
}
table tr th {
font-weight: bold;
color: #eee;
border: 1px solid #009688;
background-color: #009688;
}
我們可以將這個代碼寫到一個CSS文件中,然後引入到我們的html中,也可以直接寫在html中的<style>
標籤中,效果圖爲:
好了,這樣我們一個前端的Markdown文本編輯器就成功的實現了,並且進行了一定的美化。如果大家需要插入到項目中的話,大家可以根據自己項目的需要進行相對應的一個更改美化,這篇文章就到這裏啦!如果喜歡的話可以點個關注呦~
本文原創爲CSDN博主亓官劼,原文鏈接爲:小白都能看得懂的教程 一本教你如何在前端實現markdown編輯器,請大家支持原創,拒絕抄襲。