stackedit编辑器相关经验

返回主页

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

stackedit简介

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

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

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

stackedit的使用教程

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

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

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

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

stackedit离线配置

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

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

详见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文件的方案吧!

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

常用离线模板

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

采用下面的模板,然后导出为.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>

返回主页

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


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