Yêu cầu thg 1 1, 2019 6:03 SA 389 0 1
  • 389 0 1
0

Render data with Remarkable Plugin in Laravel

Chia sẻ
  • 389 0 1

Em chào mọi người, hiện em đang dùng plugin như Viblo để render data từ markdown sang HTML.

Đầu tiên, e dùng webpack để combine toàn bộ code JS ra thành main.js

Trong index.js em code như sau:

var Remarkable = require('remarkable');
var hljs       = require('highlight.js');

var _remarkableEmbed = require('remarkable-embed');

var embed = new _remarkableEmbed.Plugin();
embed.register('youtube', _remarkableEmbed.extensions.youtube);

var md = new Remarkable('full', {
    html:         false,        // Enable HTML tags in source
    xhtmlOut:     false,        // Use '/' to close single tags (<br />)
    breaks:       false,        // Convert '\n' in paragraphs into <br>
    langPrefix:   'language-',  // CSS language prefix for fenced blocks
    linkify:      true,         // autoconvert URL-like texts to links
    linkTarget:   '',           // set target to open link in

    // Enable some language-neutral replacements + quotes beautification
    typographer:  false,

    // Double + single quotes replacement pairs, when typographer enabled,
    // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
    quotes: '“”‘’',

    // Highlighter function. Should return escaped HTML,
    // or '' if input not changed
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return hljs.highlight(lang, str).value;
            } catch (__) {}
        }

        try {
            return hljs.highlightAuto(str).value;
        } catch (__) {}

        return ''; // use external default escaping
    }
});

md.use(embed.hook);
md.render('Content of render');

Nhưng vấn đề là em muốn render ra ở trang posts/show.blade.php ở trong Laravel thì phải làm sao ạ? Em chưa hiểu phải làm thế nào ạ?

Em cám ơn.

thg 1 1, 2019 10:48 SA

Không liên quan nhưng bạn thay avatar đẹp gớm! ^^

Avatar Jimmy Nguyen @minhtuancnttk39
thg 1 1, 2019 2:23 CH

@huukimit Công ty bắt thay avatar nên lấy lên Viblo luôn a ạ.. 😄

1 CÂU TRẢ LỜI


Đã trả lời thg 1 1, 2019 10:53 SA
Đã được chấp nhận
+2

Dùng Viblo SDK JS đi bạn, trong SDK có public bộ render Markdown của Viblo. Đầu vào của bạn chỉ cần là text viết theo cú pháp Markdown, đầu ra sẽ là HTML. ^^ Server chỉ cần in mã markdown ra một thẻ div chẳng hạn, rồi client sẽ dùng javascript để đọc markdown từ thẻ đấy rồi render ra HTML với Viblo SDK-JS. Hoặc cùng lắm thì dùng Node.js làm server side rendering, sẽ có thể sử dụng SDK-JS của Viblo để render markdown trên trực tiếp trên server side luôn thay vì dùng js dưới client để render. 😃

Mời bạn tham khảo tạ Viblo SDK JS tại: https://viblo.asia/tools

Chia sẻ
Avatar Jimmy Nguyen @minhtuancnttk39
thg 1 1, 2019 2:29 CH

Anh có thể nói cụ thể hơn cách dùng được không anh? Em đang mò đây ạ?

thg 1 2, 2019 1:17 SA

@minhtuancnttk39 Bạn cài viblo-sdk qua NPM. Import bộ markdown theo cách đơn giản sau nè:

import Markdown from 'viblo-sdk/markdown'

const text = '#Heading'
const markdown = Markdown()
const html = markdown.render(text)

console.log(html)
// <h1>Heading</h1>
thg 1 2, 2019 1:18 SA

Opensource: https://github.com/viblo-asia/sdk-js Rảnh ngồi tạo pull request chơi cho bộ SDK này nhé. :v

Avatar Lê Thanh Tùng @tungltominext
thg 6 18, 2019 2:23 SA

A nguyễn hữu kim có thể demo được k ạ., e làm theo nó báo lỗi loi.jpg

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí