stackedit编辑器相关经验

stackedit编辑器相关经验

返回主页

stackedit简介

官网https://stackedit.io/，是一款免费开源跨平台很实用的markdown编辑器

只需要在浏览器中输入网址https://stackedit.io/app#
就可以写markdown，支持在线或离线，它支持公式的输入以及流程图的绘制，它可以自动保存文件，并且可以很方便同步到github或者dropbox，因此用它来做笔记和写网页很不错

第一次打开有点慢，需要稍等会

stackedit的使用教程

《大学》有句话说得好：“未有学养子而后嫁的者也”
可以理解成：没有先学会生儿育女，然后再出嫁的女人。

生儿育女这等大事尚且不是先看各种视频文档教程彻底学会再去实践，何况一个小小网页编辑器的使用！

因此大胆尝试自行操作摸索，相关按钮多试试，比看教程靠谱，不用担心出问题！而且也不可能出什么问题，真的实在碰到解决不了的问题(不可能出现)，卸载浏览器重新安装浏览器就好。

常用的按钮就2个，一个在左上角：它处理文件管理，另一个在右上角：它处理相关配置，以及文件的导入及导出等。

stackedit离线配置

因为完全在线总会让人觉得有点不靠谱，所以配置一个离线版本有一定的必要，至少得知道怎么去配置

在deepin15.11系统中测试成功，windows系统应该差不多

安装node，查看是否安装，可终端输入node -v，下面命令可安装
sudo apt install node
下载离线包StackEdit github源码
解压StackEditz.zip并安装相关包：进入StackEditz文件夹打开终端，输入命令npm install，这一步需要等很长时间，也需要网络比较好。实践中，本文作者因为网络问题半天半天动不了，就Ctrl + C切断，然后再次执行npm install，后面就装好了。
进入StackEditz所在文件夹，打开终端输入
npm start
最后在浏览器中输入http://localhost:8080/app#就可以实现离线操作

详见github上该软件作者的说明 https://github.com/benweet/stackedit

Stackedit文档的安全性

问：写好的文档，因为清除浏览器记录和缓存会丢失吗？

答：本文作者没试过，但是关闭浏览器或者关机之后，再次打开，并不会丢失文档数据。

问：万一浏览器崩溃，或者系统崩溃，文档怎么找回来？

答：碰到这种办法或许真没办法，因此最好的解决办法就是每次写好文档之后同步到github的私人仓库中。把文档交给github私人仓库保管，安全性应该不用担心，换电脑或系统也不怕。由于github里面可以查看历史提交版本，因此不小心操作失误也可以找回来。此外因为每个.md格式文档都是文本文档，因此可以直接在github上预览，此外普通文件占用空间大约为10KB 或 0.01M，完全不用担心空间存储问题。如果实在不放心网页存储，最好的办法就是本地存储，把本次编辑好的文档，都给导出.md文件。本文作者行中庸之道，把写好的文档一个个同步到github上，等文档多了，一次性从github上下载zip压缩包。

目前版本Stackedit 5.14的优势很多，但是还有一个小缺陷，不能一次性导入或者导出所有的.md文档，当然，配合github私人仓库，这个小缺陷可以忽略

配置stackedit个人模板

问：为什么需要配置stackedit个人模板？

回答1： 因为默认模版相关.css文件在国外服务器上，很可能因为网络原因，网页文件因为没有完全加载好.css文件，导致显示失常，最常见问题就是公式显示凌乱。

回答2： 其实还有个文档安全性问题，万一局域网都断了呢？如果断网就意味着.html文件不能正常显示，上面用github的方案只是解决了.md文件的安全问题，.html必须依赖网络总不是个靠谱的事情，现在网络确实不是问题，但总要知道一个离线正常显示.html文件的方案吧！

因此我们需要有所准备，希望能实现下面两个目标，解决后顾之忧

加载国内服务器上的css，详见后面给的几个配置模板，相关界面可依次点击：MENU(右上角图标)->Templates->数学加号形状图标
导出的.html网页文件能本地离线显示，操作如下，嫌麻烦的话点我下载1.2M，解压后可用 (这个包只做测试，请尽量从官网下载)
- 下载本文作者配置的newstackedit.css 文件(其实就是把stackedit官网的.css文件中和katex相关的那部分删除)，打开这个网站 https://kz16.top/newstackedit.css 按快捷键Ctrl + S保存即可下载
- 下载katex官网离线包katex官网离线包
- 下载好上面两个文件之后，把在线模板的头文件中网页路径改成本地路径就OK

常用离线模板

离线常用模板支持公式和流程图

采用下面的模板，然后导出为.html文件，并把这个.html文件放到本文作者下载的测试包中就可以离线显示公式

<!DOCTYPE html>  
<html>  
  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>{{files.0.name}}</title>  
<link rel="stylesheet" href="./newstackedit.css" />
<link rel="stylesheet" href="./katex/katex.min.css" />
<script src="./katex/katex.min.js" type="text/javascript"></script>
<script src="./katex/contrib/auto-render.min.js" type="text/javascript"></script>
</head>  

{{#if pdf}}  
<body class="stackedit stackedit--pdf">  
{{else}}  
<body class="stackedit">  
{{/if}}  
<div class="stackedit__left">  
<div class="stackedit__toc">  
{{#tocToHtml files.0.content.toc 3}}{{/tocToHtml}}  
</div>  
</div>  
<div class="stackedit__right">  
<div class="stackedit__html">  
{{{files.0.content.html}}}  
</div>  
</div>  
</body>  
  
</html>

最简单在线模板

简单模板不含公式和流程图，但是加载的.css文件体积很小

<!DOCTYPE html>  
<html>  
  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
<title>{{files.0.name}}</title>  
<link rel="stylesheet" href="https://kz16.top/simplestackedit.css" />  
</head>  
  
{{#if pdf}}  
<body class="stackedit stackedit--pdf">  
{{else}}  
<body class="stackedit">  
{{/if}}  
<div class="stackedit__left">  
<div class="stackedit__toc">  
{{#tocToHtml files.0.content.toc 3}}{{/tocToHtml}}  
</div>  
</div>  
<div class="stackedit__right">  
<div class="stackedit__html">  
{{{files.0.content.html}}}  
</div>  
</div>  
</body>  
  
</html>

常用在线模板

常用模板支持公式和流程图

<!DOCTYPE html>  
<html>  
  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>{{files.0.name}}</title>  
<link rel="stylesheet" href="https://kz16.top/newstackedit.css" />  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">  
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>  
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"  
onload="renderMathInElement(document.body);"></script>  
</head>  
{{#if pdf}}  
<body class="stackedit stackedit--pdf">  
{{else}}  
<body class="stackedit">  
{{/if}}  
<div class="stackedit__left">  
<div class="stackedit__toc">  
{{#tocToHtml files.0.content.toc 3}}{{/tocToHtml}}  
</div>  
</div>  
<div class="stackedit__right">  
<div class="stackedit__html">  
{{{files.0.content.html}}}  
</div>  
</div>  
</body>  
  
</html>

常用在线模板+GeoGeobra

对比前面那个常用模板，这个模板多了后面一大串大码，以及头文件中多了一行代码

<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>

全部模板如下

<!DOCTYPE html>  
<html>  
  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>{{files.0.name}}</title>  
<link rel="stylesheet" href="https://kz16.top/newstackedit.css" />  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">  
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>  
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"  
onload="renderMathInElement(document.body);"></script>  
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>  
</head>  
  
{{#if pdf}}  
<body class="stackedit stackedit--pdf">  
{{else}}  
<body class="stackedit">  
{{/if}}  
<div class="stackedit__left">  
<div class="stackedit__toc">  
{{#tocToHtml files.0.content.toc 3}}{{/tocToHtml}}  
</div>  
</div>  
<div class="stackedit__right">  
<div class="stackedit__html">  
{{{files.0.content.html}}}  
</div>  
</div>  
</body>  
  
  
<div id="ggbid"></div>  
<div id="ggbid1"></div>  
<div id="ggbid2"></div>  
<div id="ggbid3"></div>  
<div id="ggbid4"></div>  
<div id="ggbid5"></div>  
<div id="ggbid6"></div>  
<div id="ggbid7"></div>  
<div id="ggbid8"></div>  
<div id="ggbid9"></div>  
  
<script type="text/javascript">  
var ggb = document.getElementById("ggbid").innerText;  
var ggb1 = document.getElementById("ggbid1").innerText;  
var ggb2 = document.getElementById("ggbid2").innerText;  
var ggb3 = document.getElementById("ggbid3").innerText;  
var ggb4 = document.getElementById("ggbid4").innerText;  
var ggb5 = document.getElementById("ggbid5").innerText;  
var ggb6 = document.getElementById("ggbid6").innerText;  
var ggb7 = document.getElementById("ggbid7").innerText;  
var ggb8 = document.getElementById("ggbid8").innerText;  
var ggb9 = document.getElementById("ggbid9").innerText;  
document.getElementById("ggbid").style.display="none";  
document.getElementById("ggbid1").style.display="none";  
document.getElementById("ggbid2").style.display="none";  
document.getElementById("ggbid3").style.display="none";  
document.getElementById("ggbid4").style.display="none";  
document.getElementById("ggbid5").style.display="none";  
document.getElementById("ggbid6").style.display="none";  
document.getElementById("ggbid7").style.display="none";  
document.getElementById("ggbid8").style.display="none";  
document.getElementById("ggbid9").style.display="none";  
var parameters = {"width":410, "height":380,"enableRightClick":true, "borderColor":"white", "ggbBase64":ggb};  
var parameters1 = {"width":520, "height":380,"enableRightClick":true, "borderColor":"white", "ggbBase64":ggb1};  
var parameters2 = {"width":430, "height":400,"enableRightClick":true, "borderColor":"white", "ggbBase64":ggb2};  
var parameters3 = {"width":600, "height":300,"enableRightClick":true, "borderColor":"white", "ggbBase64":ggb3};  
var parameters4 = {"width":600, "height":300,"enableRightClick":true, "borderColor":"white", "ggbBase64":ggb4};  
var parameters5 = {"width":430, "height":400,"enableRightClick":true, "borderColor":"white", "ggbBase64":ggb5};  
var parameters6 = {"width":430, "height":400,"enableRightClick":true, "borderColor":"white", "ggbBase64":ggb6};  
var parameters7 = {"width":430, "height":400,"enableRightClick":true, "borderColor":"white", "ggbBase64":ggb7};  
var parameters8 = {"width":430, "height":400,"enableRightClick":true, "borderColor":"white", "ggbBase64":ggb8};  
var parameters9 = {  
"width":700,  
"height":500,  
"autoHeight":true,  
"useBrowserForJS":true,  
"enableLabelDrags":true,  
"enableShiftDragZoom":true,  
"enableRightClick":true,  
"showMenuBar":true,  
"showAlgebraInput":true,  
"showToolBar":true,  
"showFullscreenButton":true,  
"disableAutoScale":true,  
"ggbBase64":ggb9,  
};  
  
var applet = new GGBApplet(parameters, '5.0');  
var applet1 = new GGBApplet(parameters1, '5.0');  
var applet2 = new GGBApplet(parameters2, '5.0');  
var applet3 = new GGBApplet(parameters3, '5.0');  
var applet4 = new GGBApplet(parameters4, '5.0');  
var applet5 = new GGBApplet(parameters5, '5.0');  
var applet6 = new GGBApplet(parameters6, '5.0');  
var applet7 = new GGBApplet(parameters7, '5.0');  
var applet8 = new GGBApplet(parameters8, '5.0');  
var applet9 = new GGBApplet(parameters9, '5.0');  
window.onload = function() {  
applet.inject('ggbApplet');  
applet1.inject('ggbApplet1');  
applet2.inject('ggbApplet2');  
applet3.inject('ggbApplet3');  
applet4.inject('ggbApplet4');  
applet5.inject('ggbApplet5');  
applet6.inject('ggbApplet6');  
applet7.inject('ggbApplet7');  
applet8.inject('ggbApplet8');  
applet9.inject('ggbApplet9');  
};  
</script>  
</html>

stackedit最新配置代码

如果想离线显示, 只需下载好 https://kz16.top/newstackedit.css
与
https://kz16.top/katex.css
然后在头文件中配置好相应的本地地址

这里的katex.css来源于marktext编辑器, 它的优势是base64代码, 一个文件就可以正常显示, 具有很好的兼容性.

需要注意的是: 由于出现问题
https://github.com/KaTeX/KaTeX/issues/2347
因此新版本的stackedit导出来的公式默认为mathnormal, 如果用下面的CSS, 显示的公式x字体会是

用文本编辑器把所有的mathnormal替换成mathdefault, 则公式x可以变成

<!DOCTYPE html>  
<html>  
  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>{{files.0.name}}</title>
<link rel="shortcut icon" href="https://kz16.top/kz16logo.svg" />
<link rel="stylesheet" href="https://kz16.top/newstackedit.css" />  
<link rel="stylesheet" href="https://kz16.top/katex.css" />  
</head>  
  
{{#if pdf}}  
<body class="stackedit stackedit--pdf">  
{{else}}  
<body class="stackedit">  
{{/if}}  
<div class="stackedit__left">  
<div class="stackedit__toc">  
{{#tocToHtml files.0.content.toc 3}}{{/tocToHtml}}  
</div>  
</div>  
<div class="stackedit__right">  
<div class="stackedit__html">  
{{{files.0.content.html}}}  
</div>  
</div>  
</body>  
  
</html>

返回主页

主页地址 https://kz16.top/

欢迎非商业转载，转载请指明来源，
本文来源 https://kz16.top/stackedit