使用Docker搭建StackEdit在線MarkDown編輯器

1、安裝Docker

# 安裝Docker
https://docs.docker.com/get-docker/# 安裝Docker Compose
https://docs.docker.com/compose/install/# CentOS安裝Docker
https://mp.weixin.qq.com/s/nHNPbCmdQs3E5x1QBP-ueA

2、安裝StackEdit

2.1、方式1

詳見:
https://benweet.github.io/stackedit.js
https://github.com/benweet/stackedit.js

創建目錄;

mkdir stackedit

切換目錄:

cd stackedit

創建index.js文件:

/* https://benweet.github.io/stackedit.js/index.js */
/* eslint-disable prefer-arrow-callback, comma-dangle */
/* global Stackedit */function makeEditButton(el) {const div = document.createElement('div');div.className = 'stackedit-button-wrapper';div.innerHTML = '<a href="javascript:void(0)"><img src="icon.svg">Edit with StackEdit</a>';el.parentNode.insertBefore(div, el.nextSibling);return div.getElementsByTagName('a')[0];
}const textareaEl = document.querySelector('textarea');
makeEditButton(textareaEl).addEventListener('click', function onClick() {const stackedit = new Stackedit();stackedit.on('fileChange', function onFileChange(file) {textareaEl.value = file.content.text;});stackedit.openFile({name: 'Markdown with StackEdit',content: {text: textareaEl.value}});});const htmlEl = document.querySelector('.html');
let markdown = 'Hello **Markdown** writer!';function doOpen(background) {const stackedit = new Stackedit();stackedit.on('fileChange', function onFileChange(file) {markdown = file.content.text;htmlEl.innerHTML = file.content.html;});stackedit.openFile({name: 'HTML with StackEdit',content: {text: markdown}}, background);
}doOpen(true);
makeEditButton(htmlEl).addEventListener('click', function onClick() {doOpen(false);});

創建index.html文件:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>stackedit.js</title>
</head><body><textarea></textarea>
</body><script src="https://unpkg.com/stackedit-js@1.0.7/docs/lib/stackedit.min.js"></script>
<script src="index.js"></script>
</html>

運行容器:

docker run -it -d --name stackedit -p 8080:80 nginx:latest

查看容器列表:

docker ps

復制文件到容器:

# 備份:
docker exec -it stackedit \cp /usr/share/nginx/html/index.html \/usr/share/nginx/html/index.html-bak # 復制文件到容器:
docker cp index.js stackedit:/usr/share/nginx/html
docker cp index.html stackedit:/usr/share/nginx/html

停止容器;

docker stop stackedit

刪除容器:

docker rm stackedit

刪除鏡像:

docker rmi nginx:latest

2.2、方式2

詳見:https://github.com/benweet/stackedit

拉取鏡像:

docker pull benweet/stackedit:latest

運行容器:

docker run -it -d --name stackedit -p 8080:8080 benweet/stackedit:latest

查看容器列表:

docker ps

停止容器:

docker stop stackedit

刪除容器:

docker rm stackedit

刪除鏡像:

docker rmi benweet/stackedit:latest

3、瀏覽器訪問

假設當前ip為192.168.186.128
瀏覽器訪問:http://192.168.186.128:8080

首頁:

點擊“START WRITING”:

4、詳見

https://stackedit.io
https://github.com/benweet/stackedit
https://benweet.github.io/stackedit.js
https://github.com/benweet/stackedit.js
https://mp.weixin.qq.com/s/OtqnXgnOwrA7eYHkaPGrwQ

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/94569.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/94569.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/94569.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【C++詳解】用哈希表封裝實現myunordered_map和 myunordered_set

文章目錄一、框架分析二、封裝框架&#xff0c;解決KeyOfT三、?持iterator的實現四、const迭代器五、實現key不支持修改六、operator[ ]七、一些補充(reserve和rehash)八、源碼一、框架分析 SGI-STL30版本源代碼中沒有unordered_map和unordered_set&#xff0c;SGI-STL30版本是…

【 MYSQL | 基礎篇 四大SQL語句 】

摘要&#xff1a;本文先介紹數據庫 SQL 的核心概念&#xff0c;接著闡述 SQL 通用語法與 DDL、DML、DQL、DCL 四大分類&#xff0c;隨后詳細講解各類語句操作&#xff0c;包括 DDL 的數據庫與表操作及數據類型&#xff0c;DML 的數據增刪改&#xff0c;DQL 的查詢語法與功能&am…

Transformer 模型在自動語音識別(ASR)中的應用

文章目錄自動語音識別&#xff08;ASR&#xff09;簡介簡要介紹TransformerTransformer 在 ASR 中的應用基于“語音識別模型整體框架圖”的模塊介紹1. 音頻采集模塊&#xff08;Audio Acquisition Module&#xff09;2. 音頻預處理模塊&#xff08;Audio Preprocessing Module&…

集成電路學習:什么是SSD單發多框檢測器

SSD:單發多框檢測器 SSD(Single Shot MultiBox Detector)是一種高效的目標檢測算法,它通過單一網絡實現對象檢測,具有快速且準確的特點。以下是關于SSD的詳細解析: 一、SSD的技術特點 1、單一網絡檢測: SSD通過單一的前向傳播過程預測不同尺度的邊界框和類別概率…

【車載開發系列】汽車零部件DV與PV試驗的差異

【車載開發系列】汽車零部件DV與PV試驗的差異 【車載開發系列】汽車零部件DV與PV試驗的差異【車載開發系列】汽車零部件DV與PV試驗的差異一. 概念說明二. DV測試&#xff08;Design Verification 設計驗證測試&#xff09;三. PV測試&#xff08;Performance Verification 性能…

如何在阿里云百煉中使用釘釘MCP

本文通過阿里云百煉釘釘MCP配合&#xff0c;完成釘釘AI表格&#xff08;多維表&#xff09;數據管理 &#xff0c;其他AI開發工具可參照本文完成部署。 準備工作 在正式開始前&#xff0c;需要提前了解什么是釘釘MCP&#xff0c;詳情請參考釘釘服務端API MCP 概述。已經注冊了…

【lucene】SpanNearQuery中的slop

在`SpanNearQuery`中,`slop`的定義比你描述的稍微復雜一些。以下是一些更準確的解釋和分析: 1. `slop`的定義 `SpanNearQuery`的`slop`參數指的是兩個`SpanTermQuery`(或更一般的`SpanQuery`子句)之間允許的最大“不匹配位置”的數量。具體來說: - 不匹配位置:指的是第…

sqli-labs通關筆記-第64關 GET數值型SQL盲注(雙括號閉合 130次探測機會)

目錄 一、代碼審計 1、源碼分析 2、SQL注入風險分析 &#xff08;1&#xff09;聯合SQL注入方法&#xff08;不可行&#xff09; &#xff08;2&#xff09;報錯SQL注入方法&#xff08;不可行&#xff09; &#xff08;3&#xff09;總結 二、滲透實戰 1、滲透準備 2…

每日一題——力扣498 對角線遍歷

力扣498 對角線遍歷 問題分析給定一個 m x n 矩陣&#xff0c;我們需要按照對角線順序遍歷所有元素。對角線遍歷的特點是&#xff1a; 每條對角線上元素的行索引與列索引之和為常數遍歷方向交替變化&#xff1a;奇數對角線&#xff08;從右上到左下&#xff09;&#xff0c;偶數…

【單例模式】

概述一個類不管創建多少次對象&#xff0c;永遠只能得到該類型的一個對象的實例。常用到的比如日志模塊 &#xff0c;數據庫模塊餓漢&#xff1a;在類加載時就創建單例對象&#xff0c;因此它是線程安全的&#xff0c;因為對象的創建在程序啟動時就已經完成&#xff0c;不存在多…

Unity開發如何實現換裝技術

一、3D換裝方案SkinnedMeshRenderer組件替換&#xff08;最常用&#xff09;適用場景&#xff1a;角色需要保持骨骼動畫&#xff0c;更換服裝/武器等實現步驟&#xff1a;1.準備模型&#xff1a;所有服裝需使用相同骨骼結構&#xff08;建議在建模軟件中綁定到同一套骨骼&#…

RabbitMQ面試精講 Day 29:版本升級與平滑遷移

【RabbitMQ面試精講 Day 29】版本升級與平滑遷移 在“RabbitMQ面試精講”系列的第29天&#xff0c;我們聚焦于一個在中高級系統架構與運維面試中極具分量的話題——RabbitMQ的版本升級與平滑遷移。隨著業務發展和RabbitMQ自身功能演進&#xff08;如從經典集群到Quorum隊列、從…

Python-機器學習概述

??一、人工智能三大概念?? ??人工智能&#xff08;AI&#xff09;?? 定義&#xff1a;使用計算機模擬或代替人類智能的研究領域 目標&#xff1a;像人類一樣思考&#xff08;理性推理&#xff09;、行動&#xff08;決策執行&#xff09; 別名&#xff1a;仿智 ??…

GIT壓縮提交,將多個已經push的commit提交,合并成一個

1.選中要合并的提交2.選中后右鍵選著Squash Committs3.重新編輯提交信息4.操作完成后不能pull,要強制pushgit push --force

(多線程)線程安全和線程不安全 產生的原因 synchronized關鍵字 synchronized可重入特性死鎖 如何避免死鎖 內存可見性

線程安全問題產生原因 線程安全問題主要發生在多線程環境下&#xff0c;當多個線程同時訪問共享資源時&#xff0c; 如果沒有采取適當的同步措施&#xff0c;就可能導致數據不一致或程序行為異常1.[根本]操作系統對于線程的調度是隨機的.搶占式執行&#xff0c;這是線程安全問題…

defineCustomElement 的局限性及重載需求分析

一、defineCustomElement 的核心局限性 Vue 的 defineCustomElement 雖然實現了 Vue 組件到 Web Components 的轉換,但在跨框架/跨語言場景下存在以下關鍵局限,這也是你的項目需要重載其返回構造器的根本原因: 1. 框架間事件模型不兼容 Vue 事件機制:依賴 $emit 轉換的 C…

如何在前端開發中應用AI技術?

一、AI 輔助前端開發流程&#xff08;提效工具&#xff09;智能代碼生成與補全使用 AI 編程工具&#xff08;如 GitHub Copilot、Cursor、Amazon CodeWhisperer&#xff09;實時生成代碼片段&#xff0c;支持 HTML、CSS、JavaScript、React/Vue 等框架語法。例如&#xff0c;輸…

極海發布APM32F425/427系列高性能MCU:助力工業應用升級

聚焦工業4.0及能源管理應用對主控MCU的高性能需求&#xff0c;極海正式發布APM32F425/427系列高性能拓展型MCU&#xff0c;集合運算性能、ADC性能、Flash控制器性能與通信接口四大維度革新&#xff0c;進一步增強了EMC性能&#xff0c;重新定義Cortex-M4F內核在復雜工業場景下的…

JSX深度解析:不是HTML,勝似HTML的語法糖

JSX深度解析&#xff1a;不是HTML&#xff0c;勝似HTML的語法糖 作者&#xff1a;碼力無邊大家好&#xff01;我是依然在代碼世界里乘風破浪的碼力無邊。歡迎回到我們的《React奇妙之旅》第二站&#xff01; 在上一篇文章中&#xff0c;我們成功地用Vite啟動了第一個React應用&…

大模型應用新趨勢:從思維鏈到 HTML 渲染的破局之路

一、大模型交互范式的演進&#xff1a;從 Prompt 工程到思維鏈革新早期的 Prompt 工程曾面臨 “模型特異性” 困境 —— 精心設計的提示詞在不同模型上效果迥異。但隨著 ** 思維鏈&#xff08;CoT&#xff09;** 技術的成熟&#xff0c;這一局面正在改變。從 OpenAI o1 的隱式整…