Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

markdown 在用户端怎么解析显示呢?求代码 #7

Open
aoeng opened this issue Jan 16, 2020 · 2 comments
Open

markdown 在用户端怎么解析显示呢?求代码 #7

aoeng opened this issue Jan 16, 2020 · 2 comments

Comments

@aoeng
Copy link

aoeng commented Jan 16, 2020

No description provided.

@hxsen
Copy link

hxsen commented Apr 4, 2020

我看过这款编辑器封装的原始的markdown插件。里面也没有说,展示的时候可以使用编辑器的插件。好像是作者都没有开放给你做展示。况且,markdown自带的语法解析,并不是总是那么令人满意。
目前对解析展示最好的解决方法,就是前后端分离。前端解析的会后,使用前端自己的解析方式。
这里推荐你使了解“marked.js”这个js插件。

@hxsen
Copy link

hxsen commented Apr 4, 2020

由于js获取网页内容的时候,对“>"总是转义。所有,如果一开始把markdown文本加载到页面上,后期再通过js转换,总是会出现“>"单个字符被转义的问题 。我这里使用后ajax异步加载的形式。仅供参考
head引入以下js和css(我使用monokai-sublime.min.css,你可以换成自己喜欢的)

    <script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>
    <link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/monokai-sublime.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"></script>
    <style>
        code{
            border-radius: 6px;
        }
    </style>

脚步处理函数

<script>
        $.get('{{ route("detail.hash", ['id'=>$hashids]) }}')
        .then((res)=>{
            if(res.code == 200){
                $('#simplemde').html(marked(res.data.content));
                return true;
            }else{
                $('#simplemde').html('- 无内容 -');
                return false;
            }
        }).then((success)=>{
            if(success){
                hljs.initHighlighting();
            }
        });
    </script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants