Render data with Remarkable Plugin in Laravel
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.
1 CÂU TRẢ LỜI
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
Anh có thể nói cụ thể hơn cách dùng được không anh? Em đang mò đây ạ?
@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>
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
A nguyễn hữu kim có thể demo được k ạ., e làm theo nó báo lỗi
Không liên quan nhưng bạn thay avatar đẹp gớm! ^^
@huukimit Công ty bắt thay avatar nên lấy lên Viblo luôn a ạ..