使用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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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 的隐式整…