怎么让 larabbs 项目支持 Markdown 语法啊

发这个帖子好久了，竟然没人回复这个问题。。。可能大家都觉得这个太简单了吧，不过对于我这个前端白痴，一碰到前端问题手脚发抖的人来说，踏出“寻找前端问题解决方案”这一步是很困难的，所幸自己成功抵御了做伸手党的惰性，将前几天搞出来的解决方案与大家分享一下。（很简单，懂前端的高人就不用看了！）

1. 安装sparksuite/simplemde-markdown-editor这个库，前端编辑器，替代教程中的simditor，据说这是learnku目前在用的编辑器：

npm install simplemde --save

2. 再安装一个laravel的markdown解析库thephpleague/html-to-markdown，用来在laravel中解析markdown语法：

composer require league/html-to-markdown

3. 创建一个markdown处理器use App\Handlers\MarkdownHandler;

<?php

namespace App\Handlers;

use Parsedown;
use League\HTMLToMarkdown\HtmlConverter;

class MarkdownHandler
{
    protected $htmlConverter;

    protected $markdownConverter;

    public function __construct()
    {
        $this->htmlConverter = new HtmlConverter();

        $this->markdownConverter = new Parsedown();
    }

    public function convertMarkdownToHtml($markdown)
    {
        return $this->markdownConverter->setBreaksEnabled(true)->text($markdown);
    }

    public function convertHtmlToMarkdown($html)
    {
        return $this->htmlConverter->convert($html);
    }
}

4. 在TopicsController中引入Markdown处理器

use App\Handlers\HtmlToMarkdownHandler;

5. 在TopicsController的show方法中写入如下代码：

   public function show(Topic $topic)
    {
        $markdown = new MarkdownHandler;
        $topic->body = $markdown->convertMarkdownToHtml($topic->body);
        return view('topics.show', compact('topic'));
    }

6. 修改模板文件create_and_edit.blade.php中的js代码，去掉simditor的代码，添加simplemde的代码

   <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
   <script>
       $(document).ready(function() {
           console.log('{{ route('topics.upload_image') }}');
           {{--var editor = new Simditor({--}}
           {{--    textarea: $('#editor'),--}}
           {{--    upload: {--}}
           {{--        url: '{{ route('topics.upload_image') }}',--}}
           {{--        params: {--}}
           {{--            _token: '{{ csrf_token() }}'--}}
           {{--        },--}}
           {{--        fileKey: 'upload_file',--}}
           {{--        connectionCount: 3,--}}
           {{--        leaveConfirm: '文件上传中，关闭此页面将取消上传。'--}}
           {{--    },--}}
           {{--    pasteImage: true,--}}
           {{--});--}}
           var simplemde = new SimpleMDE({
               element: document.getElementById("editor"),
               shortcuts: {
                   "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
                   "toggleCodeBlock": null, // unbind Ctrl-Alt-C
                   "drawTable": "Cmd-Alt-T" // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
               },
               renderingConfig:{
                   singleLineBreaks: false,
                   codeSyntaxHighlighting: true // 需要highlight依赖
               },
           });
   
       });
   </script>

   我在里面设置了几个快捷键，更多选项和参数参考https://github.com/sparksuite/simplemde-markdown-editor
   show.blade.php模板里面怎么改，百度highlight.js，highlight.js的样式模板全都在：
   https://highlightjs.org/static/demo/
   把这个也介绍篇幅太长了，不适合写在一个评论里面，大家自己研究吧，也很简单，都是github的大佬们封装好的东西。
   注意，按照highlight.js的配置调整完毕之后可能发现无法展现效果，原因是项目中的webpack自动打包了教程中的_topic.body.scss文件，highlight的样式都被其覆盖了，删除_topic.body.scss的调用即可。
   综上，应该在你的文章里面可以正常使用了。

折腾了一下，发现自己不再那么怕前端代码了。。。

tql