今天要介绍给大家的内容是在laravel中使用markdown。作为一个牛逼哄哄的程序员,如果连markdown都还不会玩,那就真的太落伍了。

其实我自己做笔记,还有包括ITFun上的所有课程资料,都是通过markdown来书写的。那我来简单的演示一下。

Laravel-Markdown

在laravel中集成这个功能,你需要用到这个composer包,https://github.com/GrahamCampbell/Laravel-Markdown

composer require graham-campbell/markdown
php artisan vendor:publish
Which provider or tag's files would you like to publish?:
 [0 ] Publish files from all providers and tags listed below
 [1 ] Provider: Barryvdh\Debugbar\ServiceProvider
 [2 ] Provider: Fideloper\Proxy\TrustedProxyServiceProvider
 [3 ] Provider: GrahamCampbell\Markdown\MarkdownServiceProvider
 [4 ] Provider: Illuminate\Mail\MailServiceProvider
 [5 ] Provider: Illuminate\Notifications\NotificationServiceProvider
 [6 ] Provider: Illuminate\Pagination\PaginationServiceProvider
 [7 ] Provider: Intervention\Image\ImageServiceProviderLaravel5
 [8 ] Provider: Mews\Captcha\CaptchaServiceProvider
 [9 ] Tag: config
 [10] Tag: laravel-mail
 [11] Tag: laravel-notifications
 [12] Tag: laravel-pagination

选择3

controller

//...

use GrahamCampbell\Markdown\Facades\Markdown;

class IssuesController extends Controller
{

    //...

    public function show(Issue $issue)
    {
        $content = Markdown::convertToHtml($issue->content);
        $comments = $issue->comments;
        return view('issues.show', compact('issue', 'comments', 'content'));
    }
}

view

<div class="am-comment-bd"><p>{{ $content }}</p></div>

试一试

现在来发布一条新的issue,里面写这样的markdown内容。访问了看一下,发现他确实是起作用了。咱们写的内容,被转成了有格式html代码,但是这里却把html代码,直接显示在浏览器中了。

这也是laravel的安全机制在起作用,防止坏人恶意植入一些html或者js代码。 解决的方法也很简单,只需要把改一下显示的地方

<div class="am-comment-bd"><p>{!! $content !!}</p></div>

再来刷新看看,现在就能显示出我们想要的样子了。

highlight

现在代码部分还有一点点小问题,代码高亮还没有实现。这里我会用到一个小js插件来解决这个问题,就是highlight.jshttps://highlightjs.org

网站上给我们了一个cdn地址,但是这种cdn并不是特别的稳定,经常会碰到无法访问的情况,所有我们还是把它现下载下来好一些。

我这里使用wget把它的jscss下载下来,放到/assets/vendor/highlight目录中。windows用户可以使用迅雷或者其他工具下载。

cd public/assets/vendor
mkdir hightlight
cd hightlight
wget cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css
wget cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js

app.blade.php中,

<head>
    <!-- ... -->
    @yield('stylesheets')
</head>

issues/show.blade.php

@section('stylesheets')
    <link rel="stylesheet" href="/assets/vendor/highlight/default.min.css">
@endsection

<!-- ... -->

@section('scripts')
    <script src="/assets/vendor/highlight/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
@endsection

css

这样代码高亮就显示出来了,如果你对它默认的css不太满意,我们也可以自己修改下。

<style>
.am-comment-bd h2 {
    margin-top: 0;
    border-bottom: 1px solid #e6e8ec;
}

.am-comment-bd .hljs {
    background: none;
}

.am-comment-bd pre {
    border-radius: 5px;
}
</style>

如果你懒得修改,那也可以在这里github地址,下载一些自己喜欢的css。https://github.com/isagalaev/highlight.js/tree/master/src/styles