前端如何正确配合后端解析markdown语法

前言

我们使用后端把原始的markdown语法文本返回给前端，然后前端调用marked.js来解析到页面显示。

这里有可能用到的js链接

    <link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/atom-one-dark.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>
    <script src="https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"></script>

待解析的文本内容如下

### 这是标题

- 这里是序号1
- 这里是序号2

### 普通代码
```
$a = 1 + 3;
```

解析方式一

我们最先想到，把代码预先解析到一个div元素里面。然后，在页面完成后，再对元素的内容进行获取。然后使用marked方法进行解析后，再放回去。
如下所示，

<div class="news_con" id="simplemde">{{ $info->content }}</div>

$(function(){
    $markdown = $('#simplemde').html();
    $('#simplemde').html(marked($markdown));
});

这样能正确的解析了markdown的代码，效果如下

问题，似乎就这么解决了。但是，当我写了一些php代码的时候，发现了新问题。
php的代码如下

### php代码
```
$b = ['a'=>'苹果', 'b'=>'男生', 'c'=>'猫咪'];
$ins = (new Tag)->where('open', 1)->get();
```

结果，我的php代码被解析成了如下的样子

我的代码原本的>，都被转换成了&gt，这就不是我想要的了。

原因分析
出现这种情况的时候，在于js获取标签的时候，会对某些字符进行转义，比如>符号。

针对该问题，提出来如下的解决方式。

解决方式二

用text()代替html()获取，即可；

$(function(){
    $markdown = $('#simplemde').text();
    console.log($markdown);
    $('#simplemde').html(marked($markdown));
});

效果如下：

其他的解决办法

同时，还有使用以下的解决方式，仅供参考

1. 使用异步获取内容，js请求文章主体，然后解析。
   这种方式，也能解决问题
2. 使用textarea标签承载
   把元素不放在div标签内，放在textarea标签内部，然后使用$('textarea').val()进行获取markdown的值，也能解决问题