前言
我们使用后端把原始的markdown语法文本
返回给前端,然后前端调用marked.js
来解析到页面显示。
这里有可能用到的js链接
<link href="https://cdn.bootcss/highlight.js/9.18.1/styles/atom-one-dark.min.css" rel="stylesheet">
<script src="https://cdn.bootcss/marked/0.8.1/marked.min.js"></script>
<script src="https://cdn.bootcss/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代码被解析成了如下的样子
我的代码原本的>
,都被转换成了>
,这就不是我想要的了。
原因分析
出现这种情况的时候,在于js获取标签的时候,会对某些字符进行转义,比如>
符号。
针对该问题,提出来如下的解决方式。
解决方式二
用text()
代替html()
获取,即可;
$(function(){
$markdown = $('#simplemde').text();
console.log($markdown);
$('#simplemde').html(marked($markdown));
});
效果如下:
其他的解决办法
同时,还有使用以下的解决方式,仅供参考
- 使用异步获取内容,js请求文章主体,然后解析。
这种方式,也能解决问题 - 使用
textarea
标签承载
把元素不放在div
标签内,放在textarea
标签内部,然后使用$('textarea').val()
进行获取markdown的值,也能解决问题
更多推荐
前端如何正确配合后端解析markdown语法
发布评论