目前大多数相关项目实现的都是服务器端的Markdown语法解析,解析后将HTML代码返回给客户端,比如这个C#的项目:markdownsharp

我感觉这么轻量的格式没必要浪费服务器运算及带宽资源,还是通过Javascript实现客户端解析的方法最为实用,而且客户端解析的方式还能实现实时的所见即所得对照编辑,非常方便。

多番寻找和尝试,最终选定了markdown-js

首先从这里下载其浏览器版:

https://github.com/evilstreak/markdown-js/releases

image

解压缩后在其js文件同目录下新建一个网页进行测试,代码如下:

<!DOCTYPE html>
<html>
  <body>
    <textarea id="text-input" oninput="this.editor.update()"
              rows="6" cols="60">Type **Markdown** here.</textarea>
    <div id="preview"> </div>
    <script src="markdown.js"></script>
    <script>
      function Editor(input, preview) {
        this.update = function () {
          preview.innerHTML = markdown.toHTML(input.value);
        };
        input.editor = this;
        this.update();
      }
      var $ = function (id) { return document.getElementById(id); };
      new Editor($("text-input"), $("preview"));
    </script>
  </body>
</html>

这样就轻松的实现了实时解析转换:

image

转换后得到的只是最基础的HTML,可以用CSS美化一下,随手将Bootstarp的CSS引用过来看看:

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
  <body >
    <textarea id="text-input" oninput="this.editor.update()"
              rows="6" cols="60">Type **Markdown** here.</textarea>
    <div id="preview"> </div>
    <script src="markdown.js"></script>
    <script>
      function Editor(input, preview) {
        this.update = function () {
          preview.innerHTML = markdown.toHTML(input.value);
        };
        input.editor = this;
        this.update();
      }
      var $ = function (id) { return document.getElementById(id); };
      new Editor($("text-input"), $("preview"));
    </script>
  </body>
</html>

image

这样看起来已经很不错了。

顺带来看一下转换后生成的HTML代码吧:

<div id="preview"><p><code>Type</code> <strong>Markdown</strong> here.</p>

<h1>测试</h1>

<hr>

<h3>开始</h3>

<blockquote><p>引用<br>12345</p></blockquote>

<ul><li>无序  </li><li>aa </li><li>ass<code>SDDS</code></li><li>33<em>1222</em>cccccccccccc</li></ul>

<p><a href="http://www.126.com">126邮箱</a></p>

<pre><code>代码块11111111111111111113
1111111111111111111111111111112222&lt;&gt;C&lt;OC)(#838132@#!#*!$$</code></pre></div>

将此技术应用在博客或是CMS平台上会非常实用,也可以作为公告系统或私信系统使用。

这种方式的缺点在于SEO方面:搜索引擎可能无法了解页面内容的格式,像本该着重的标题的可能只会被当做普通内容一并处理,甚至还可能认为此内容是乱打的(那么多多余的符号~)。

转载此文章时须注明转载自”SkyD(斯克迪亚)开发者博客“,并保留此文章的Url链接

作者信息

昵称
斯克迪亚

查看其所发布的所有文章

总积分
2440
注册时间
(2018年5月4日 19:06)

评论

目前还没有任何评论。

[切换到移动版页面]