Asked Jan 1st, 6:03 AM 69 0 1
  • 69 0 1
0

Render data with Remarkable Plugin in Laravel

Share
  • 69 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.

Jan 1st, 10:48 AM

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

+1
|Reply
Share
Nguyễn Minh Tuấn@minhtuancnttk39
Jan 1st, 2:23 PM

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

1 ANSWERS


Answered Jan 1st, 10:53 AM
Accepted
+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

Share
Nguyễn Minh Tuấn@minhtuancnttk39
Jan 1st, 2:29 PM

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

Jan 2nd, 1:17 AM

@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>
+1
|Reply
Share
Jan 2nd, 1:18 AM

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

+1
|Reply
Share