將Markdown編輯器搬進您的博客-讓我們更優雅的書寫文章

来源:https://www.cnblogs.com/guoyugy/archive/2020/02/23/12354333.html
-Advertisement-
Play Games

各位小伙伴們,冷月今天給大家發一波福利。我們都知道markdown編輯器非常的好用,是我們寫作的好幫手。這樣的一款好用的文章編輯器,我們怎麼才能讓自己的博客也支持呢,冷月今天來教大家如何將Markdown編輯器搬進您的博客。 首先,我們來看一下效果圖: 那麼我們要怎麼做呢,冷月這邊幫大家找到一個開源 ...


各位小伙伴們,冷月今天給大家發一波福利。我們都知道markdown編輯器非常的好用,是我們寫作的好幫手。這樣的一款好用的文章編輯器,我們怎麼才能讓自己的博客也支持呢,冷月今天來教大家如何將Markdown編輯器搬進您的博客。

首先,我們來看一下效果圖:

那麼我們要怎麼做呢,冷月這邊幫大家找到一個開源的Markdown編輯器叫Editor.md,但是官方已經沒有維護這個項目了。所以冷月將下載好的插件放到了我的公眾號中。大家只需要關註冷月的微信公眾號:學長冷月。回覆:markdown。冷月將整理好的資料發給您。

好了,大家下載好了插件後,只需要按照我下麵的介紹來就可以成功。

首先,大家看到的目錄結構是這樣的,index.html是官方給的一個示例代碼,大家可以參考使用。如下所示:

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
    <textarea style="display:none;">### 關於 Editor.md

**Editor.md** 是一款開源的、可嵌入的 Markdown 線上編輯器(組件),基於 CodeMirror、jQuery 和 Marked 構建。
    </textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "editormd/lib/"
        });
    });
</script>

大家只需要將這段代碼放入您自己需要引入markdown的地方,再把css和js的路徑改成你的地址,那麼您就成功將markdown引入您的博客啦。

如果這篇博文有幫助到您,可以幫冷月點一個贊或者加一個關註哦!

歡迎關註我的公眾號:學長冷月,獲得獨家整理的學習資源和日常乾貨推送。
如果您對我的專題內容感興趣,也可以關註我的博客:guoyu7.com


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 簡介: 正常情況下,HttpSession是通過Servlet 容器創建併進行管理的,創建成功之後都是保存在記憶體中。如果開發者需要對項目進行橫向擴展搭建集群,那麼可以利用一些硬體或者軟體工具來做負載均衡,此時,來自同一用戶的HTTP請求就有可能被分發到不同的實例上去,如何保證各個實例之間Sessio ...
  • ffmpeg命令介紹 ffmpeg.exe(linux/imac一般不帶尾碼,ffmpeg), 是一款音視頻編解碼的命令行工具軟體, 常用於多媒體測試的文件製作與轉碼。 我們常用的:格式工廠,MediaCoder等多媒體格式轉換軟體, 其關鍵技術有一部分是直接或間接依賴ffmpeg.exe的, ff ...
  • Java實例初始化程式 是在執行構造函數代碼之前執行的代碼塊。每當我們創建一個新對象時,這些初始化程式就會運行。 1.實例初始化語法 用 花括弧 創建實例初始化程式塊。對象初始化語句寫在括弧內。 2.Java實例初始化器功能 實例初始化器具有以下功能。 我們可以在一個類中定義 多個初始化器 。 所有 ...
  • Java構造函數 是特殊的方法(沒有返回類型),使您可以在應用程式內部的其他類使用對象之前完全初始化對象狀態。Java中的構造方法是使用 關鍵字調用的。下麵讓我們更深入地瞭解構造函數。 1.什麼是java構造函數 構造函數是一種特殊的方法,類似於(沒有確切的方法)構造,它可以幫助程式員在對象可被應用 ...
  • Java訪問修飾符–public, protected, private and default Java提供了 四個訪問修飾符 來設置類,變數,方法和構造函數的訪問級別,即 public , private , protected 和 default 。這些訪問級別修飾符確定其他類是否可以使用特定 ...
  • 在本 Java OOPs 概念教程中,我們將學習四種主要的面向對象原則 抽象、封裝、繼承和多態性。它們也被稱為面向對象編程範式的四大支柱。 1. _ 抽象 _是在不考慮無關細節的情況下公開實體基本細節的過程,以降低用戶的複雜性。 1. _ 封裝 _是將數據和對數據的操作捆綁到一個實體中的過程。 1. ...
  • 一、拋磚引玉 既然Java中支持以多線程的方式來執行相應的任務,但為什麼在JDK1.5中又提供了線程池技術呢?這個問題大家自行腦補,多動腦,肯定沒壞處,哈哈哈。。。 說起Java中的線程池技術,在很多框架和非同步處理中間件中都有涉及,而且性能經受起了長久的考驗。可以這樣說,Java的線程池技術是Jav ...
  • 我們知道多線程可以實現同時執行多個任務(只是看起來是同時,其實是CPU的時間片切換特別快我們沒感覺而已)。 現在假設一個做飯的場景,你沒有廚具也沒有食材。你可以去網上買一個廚具,但是這段時間,你不需要閑著啊,可以同時去超市買食材。 設想這是兩個線程,主線程去買食材,然後開啟一個子線程去買廚具。但是, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...