2. 程式人生 > >在個人網站中引入Markdown編輯文字

在個人網站中引入Markdown編輯文字

阿新 • • 發佈：2019-01-09

Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式。

下載地址

選擇markdown-browser-0.6.0-beta1.tgz

下載後解壓會得到兩個庫檔案

  1. markdown.js
  2. markdown.min.js

示例程式碼

<!DOCTYPE html>
<html>
  <body>
    <textarea id="text-input" oninput="this.editor.update()"
              rows="6"
 
 cols="60">Type **Markdown** here.</textarea>
    <div id="preview"> </div>
    <script src="markdown.js"></script>
    <script>
      function Editor(input, preview) {
        this.update = function () {
          preview.innerHTML = markdown.toHTML(input.value);
        };
        input.editor = this
 
;
        this.update();
      }
      var $ = function (id) { return document.getElementById(id); };
      new Editor($("text-input"), $("preview"));
    </script>
  </body>
</html>

效果圖

這裡寫圖片描述

這樣就實現了引用Markdown到瀏覽器中的目的，但美中不足的是無法像CSDN的Markdown編輯器一樣功能強大。沒有選單欄。

Tips

在第一次下載時使用的是 markdown-0.6.0-beta1.tgz

這個壓縮包解壓後文件會比較多，其中有一個說明文件就是上面的示例程式碼，但用這個壓縮包裡面的js檔案在瀏覽器裡引用會報markdown is not defined 和 export is not defined 換了 markdown-browser-0.6.0-beta1.tgz這個包裡面的檔案就很順利了。

相關推薦

在個人網站中引入Markdown編輯文字

Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式。 下載地址 選擇markdown-browser-0.6.0-

vue中引入wangEditor富文字編輯器

1.wangEditor —— 輕量級 web 富文字編輯器，配置方便，使用簡單。支援 IE10+ 瀏覽器。 下載wangEditor：npm install wangeditor（英文小寫） 官網：www.wangEditor.com 文件：www.kancloud.cn/wa

有道雲筆記中使用Markdown編輯器編輯文字

    使用markdown編輯似乎成了程式設計師的主流編輯文字軟體.CSDN部落格有內建的markdown,有道雲筆記也完美的相容了markdown.現在就來講講鄙人一點使用的簡單方法. 工具:有道

怎樣在迅捷畫圖網站中二次編輯網路拓撲流程圖模板

　　現在除了可以自己繪製流程圖之外，還有一種很便捷的方法是套用模板進行編輯使用，直接將模板裡面的內容換成自己需要的內容即可，稱為二次編輯使用，那在迅捷畫圖中怎樣二次編輯網路拓撲流程圖模板呢？操作方法如下所示。 　　工具/原料：　　迅捷畫圖軟體，能上網的電腦並帶有瀏覽器 　　操作方法介紹：　　1.進入迅捷畫

PHP專案中使用 Markdown編輯器

 個人站點 :http://oldchen.iwulai.com/       Markdown在技術圈越來越受歡迎，今天為大家帶來一款國內開源的比較好用的Markdown編輯器——editor.md。 在這

django之admin中使用markdown編輯器，並實時預覽一

安裝django-markdownx Macos：直接pip install django-mrakdownx;Ubuntu需要先安裝pillow,參考此連結。 按照官方教程設定,不同的是本文markdownx的widget如下設定，在專案的temp

網站如何整合markdown編輯器

收藏(4) Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式。它用簡潔的語法代替排版，而不像一般我們用的文書處理軟體 Word 等有大量的排版、字型設定。這使得我們能夠專心的碼字，而不需要額外地進行排版修

CSDN中使用Markdown編輯器的快捷鍵、生成目錄

目錄 用 [TOC]來生成目錄： 目錄 快捷鍵 快捷鍵 加粗 Ctrl + B 斜體 Ctrl + I 引用 Ctrl + Q 插入連結

淺談WordPress中實現Markdown編輯的終極解決方案

歡迎訪問Oldpan部落格，分享人工智慧有趣訊息，持續醞釀深度學習質量文。 既然我們的部落格主要的內容是人工智慧、機器學習、深度學習，許多理論推理和公示展示是必不可少的，不能因為公式編輯的不方便而減少對數學公式的展示和編寫，在文章中一個好的公式是很重要的，一個好的公式勝似

django之admin中使用markdown編輯器，並實時預覽二

解決圖片上傳問題 解決url路徑出錯問題 設定了MARKDOWNX_MEDIA_PATH = 'media/markdownx/img'以後，圖片顯示仍然有問題。 markdown

在html中引入線上編輯器的程式碼

  <form action="disp.php" method="post"> <?php //引用FCKeditor.php這個檔案，基本的類和資料結構都在這裡 include ("fckeditor/fckeditor.php"); //建立FCK

網頁中加入markdown編輯器

在瀏覽器整合 Mditor？ [說明]使用mditor外掛可以把markdown文字轉化成html 第一步: 引入 Mditor 樣式檔案 <link rel="stylesheet" href="your-path/dist/css/mditor

黑科技！僅需 3 行程式碼，就能將 Gitter 整合到個人網站中，實現一個 IM 即時通訊聊天室功能？

歡迎關注個人微信公眾號: 小哈學Java, 優質文章第一時間推送！！ 個人網站: https://www.exception.site/essay/how-to-use-gitter-on-your-website-quickly 一、前言 小哈從很早以前就有寫博文的習慣，不過那個時候，也沒咋認真地寫

Python獲取個人網站的所有課程下載鏈接和密碼，並保存到Mongodb中

one find() net agent play col pat 進行 jpg 1、獲取網站課程的分類地址； ‘‘‘ 爬取屌絲首頁，獲取每個分類名稱和鏈接 ‘‘‘ import requests from lxml import etree headers = {

在 Vue 項目中引入 tinymce 富文本編輯器

www. href 一次 upload 更新 one 官網 語言 wysiwyg 項目中原本使用的富文本編輯器是 wangEditor，這是一個很輕量、簡潔編輯器 但是公司的業務升級，想要一個功能更全面的編輯器，我找了好久，目前常見的編輯器有這些： UEditor：百度

把圖片公式轉化為文字內容。vue專案中引入MathJax.js

這是個圖片的公式，有img標籤引入。 我們想要轉成下面的效果：   在vue專案中引入MathJax.js 首先在index.html頁面  <script type="text/javascript" src="https://cdn.ma

去除windows編輯文字中的回車符

情景描述： 　　最近，huskiesir的朋友遇到了一個很奇葩的問題。那就是他在windows上搭建了一個http服務，把A指令碼放在了上面並用linux去下載和執行，但是在執行的時候出現了問題，在linux上無法執行A指令碼，報錯如下： 　　經過huskiesir和朋友的鑽研呀，發現可能是windows

CAD編輯器中怎麽隱藏文字

學會 希望 放大 方便 電腦 編輯器 一個 到你 迅捷 CAD編輯器中怎麽隱藏文字？在我們進行繪制CAD圖紙的時候都會添加一些文字或者一些數字來進行標註，以此來方便我們在查看圖紙的時候一目了然。但是有的時候我們標註的這樣文字卻擋住了CAD圖紙內容，這個時候我們就需要將標註的

CAD編輯器中怎麼自定義文字屬性樣式

想問一下大家在編輯圖紙的時候有沒有遇到過這樣的問題，就是在CAD繪圖的時候，要給編輯的圖紙中做一下特別的說明，但是CAD編輯器中原有的文字樣式部署那麼的符合，拿在CAD編輯器中怎麼自定義文字屬性樣式？具體要怎麼來進行操作?下面小編就來教教大傢俱體的操作，有興趣的朋友可以來看看。 第一步：首先，開啟電腦，看一

laravel框架中引入百度編輯器

第一步:先去這個https://ueditor.baidu.com/website/download.html 下載原始碼包   2.然後把他拉到laravel框架的public下  方便呼叫 3.開啟裡面的index頁面   把這