使用 JS 预览 Markdown

一直使用「马克飞象」写 Markdown, 后来发现了个 Showndown.js 可以渲染 Markdown, 于是就搜了下用法做出了初版一个小网页用来给自己渲染 Markdown 玩玩。不过,后来发现几个瑕疵点,换行对中文不友好,设为 GitHub Flavour 后行尾俩空格就应该是换行,但是这一行有中文的话就不会识别,因此最后找了个替代: marked.js. (还支持代码高亮哦)
贴出代码:

在线体验:http://youthlin.com/demo/marked.html

一看就懂就不需要解释了吧~~

效果预览:

// jQuery 对象和 DOM 对象以前不太清除,现在写起 jQuery 来查了下知道了, jQuery 对象是 jQuery 自己的,和原生 js 没有很大关系,它有很多简单名字的方法,如.html(). 而 DOM 对象是原生 js 的,属性和方法一大堆不好记,如 innerHTML. 所以有人写 jQuery 时会在 jQuery 对象命名时用 $ 美元符号作为前缀。
// js 中变量是否有 var 声明:在函数外,不管有没有 var 都是全局变量;在函数内,有 var 的变量时局部变量,否则是全局变量。

在线体验:http://youthlin.com/demo/marked.html


“使用 JS 预览 Markdown”的11个回复

Loading...
  1. 这么巧,估计也是你写这个博文那时候左右,我也挂我博客上一个,来来来,拼一下效果:http://he.xcy.me/user/themes/xcyam/assets/md2html.html

    1. @ 咸菜一点米 CSS 很漂亮,不过我发现:
      1. 输入时结果会随着按键闪动
      2. 不识别有序列表
      3. 代码没有高亮
      4. 我这里写的还有同步滚动/Web自适应哦

      test case:

      1. @ Youth.霖 1 输入闪动确切意思没懂。因为是实时改写内容来呈现效果,自然会闪动呀
        2 识别有序列表,可能是从外观样式看不出来罢了。你可以双击效果文字使它显示HTML源标标记(设置的一个隐藏开关)
        3 代码确实不高亮,这样可以减小Javascript文件大小,适合放置于自己博客上
        4 自适应确实不太会,但是我也有考量,我的想法是宽度100%,上下分隔用比例,当为手机等不同长宽比显示时可以较好显现视口,用chrome仿真屏幕看没问题。自动滚动上也是最简方案,当效果呈现区内容较多后在MD里继续输入则效果区总是滚动至最底层来显示新输入内容

          1. @ 咸菜一点米

            最后,需要说明的是本人是非专业人士,以上日志均为我个人见解,难免有偏颇和错误之处,不喜勿怪吧,也欢迎读者朋友来信批评指正。

            指正个鬼啊,根本不能评论 [/抠鼻]

发表评论

电子邮件地址不会被公开。 必填项已用*标注