html文件打开怎么不带行数,simple_md_based_js

simple_md_based_js

介绍

使用js+html实现简单的markdown编辑并预览，总代码行数不到500行(随着功能添加，已经不止500了)。还可以将markdown转化为html文件保存。

软件架构

markdown到html的转化其实就是将markdown关键词替换成html元素标签的过程。

使用说明

将文件下载下来后，直接双击md_parase.html打开浏览器，打开后可以看到一个窗口。

仅支持基本的语法，css文件配置也很简单，可随意配置。

注意：实时预览使用onchange事件，所以第一次加载md文件的时候无法进行实时渲染，必须往编辑区加入一个字符之后，右边的预览区才会显示渲染结果。

声明：代码是东拼西凑稍作修改而来，按理说应该放上参考链接，但是因为修改太久了，已经找不到当初复制粘贴的地方。如有侵权请联系我。

更新说明

2020年3月27日更新

修改正文显示星号的问题，离得很远的两个星号会被认为斜体，需要加转移符进行转义。同样code标识符也需要转义。目前未解决在斜体样式里插入星号内容的问题，同样也未解决在code块里插入code标识符的问题。

2020年3月26日更新

增加预览按钮，快捷键还可以使用，显示的效果略有不同。快捷键预览的结果和保存为html的结果一致。

修改预览区内容来源，在编辑区未修改的情况下，使用预览按钮进行预览时，预览内容会随着源文件的更新而更新。这个意味着可以使用其他文本编辑器编辑md文件，并使用网页实时预览渲染效果(文件必须保存)。如果编辑区有修改，则预览区显示的内容以编辑区为准。

优化代码块的识别，原来严格以```开头，末尾没有空格，但在读取文件进行渲染的时候发现读取```的结果总是有空格在后面，添加变量到watch窗口时看到有空格，鼠标悬停查看变量无空格，使用match进行正则匹配也匹配不上，但是如果先读取文件到编辑区，再获取编辑区内容则没有空格。没能搞清为什么，所以将代码块的匹配条件放宽，在标识符后面可以跟着空格。

优化css。

2020年3月25日更新

修改有序列表编号到10不显示的问题。

修改表格解析，增加对齐方式指定。原来默认左对齐。

修改输出html的格式，增加换行，方便调试。

更新的example.md，添加示例。

2020年3月24日更新

将列表的左边距变大，对齐段落。

列表的上边距缩小。

列表内换行设置为任意位置换行，默认按单词换行看起来有点怪异。

修改列表内不识别行内格式的问题(加粗、高亮、斜体、行内代码、高亮)。

修改引用块的上边距和换行位置，原来的边距太大。

修改代码块内使用小于号时被识别成html元素的问题。此bug导致小于号后面的代码被吃掉。

增加保存md文件按钮，可以保存编写的md文件。

2020年3月22日更新 :

修改css样式，为转化以后的html的页面做调整。由原来的全屏左对齐变成80%宽度居中显示，显示效果更符合网页显示。如果需要打印为pdf的话，则修改成100%显示打印效果更佳。修改的地方在css文件中有说明。

.gen_body {

height: 100%;

font-size: 1em;

background: #fafafa;

margin:0 auto;

width: 80%;/*更改这里以调整显示效果，打印为pdf的时候调成100%，网页浏览的时候80%看起来比较适合 */

}

增加全页面预览。即时渲染页面被编辑区占用一部分空间，预览效果不好，增加全页面预览。使用ctrl+alt+m快捷键进行页面来回切换。因为使用了localStorage功能，所以需要浏览器支持，并且不同浏览器容量不同，因此文档尽量不要超过5M。