README
@hiveio/content-renderer
Portable library that renders Hive posts and comments to string. It supports markdown and html and mimics the behaviour of condenser frontend.
Features:
supports markdown and html
sanitizes html and protects from XSS
Credit: this library is based on the code from condenser. It's aim is to allow other projects display Hive content the right way without porting the same code over and over.
Server side usage
Installation:
$ npm install --save @hiveio/content-renderer
Typescript:
import { DefaultRenderer } from "@hiveio/content-renderer";
const renderer = new DefaultRenderer({
baseUrl: "https://hive.blog/",
breaks: true,
skipSanitization: false,
allowInsecureScriptTags: false,
addNofollowToLinks: true,
doNotShowImages: false,
ipfsPrefix: "",
assetsWidth: 640,
assetsHeight: 480,
imageProxyFn: (url: string) => url,
usertagUrlFn: (account: string) => "/@" + account,
hashtagUrlFn: (hashtag: string) => "/trending/" + hashtag,
isLinkSafeFn: (url: string) => true,
});
const safeHtmlStr = renderer.render(postContent);
Browser usage:
See demo.
<script src="https://unpkg.com/@hiveio/content-renderer"></script>
<script>
const renderer = new HiveContentRenderer.DefaultRenderer({
baseUrl: "https://hive.blog/",
breaks: true,
skipSanitization: false,
allowInsecureScriptTags: false,
addNofollowToLinks: true,
doNotShowImages: false,
ipfsPrefix: "",
assetsWidth: 640,
assetsHeight: 480,
imageProxyFn: (url) => url,
usertagUrlFn: (account) => "/@" + account,
hashtagUrlFn: (hashtag) => "/trending/" + hashtag,
isLinkSafeFn: (url) => true,
});
$(document).ready(() => {
const renderMarkdownBtnElem = $("#render-button");
const inputElem = $("#input");
const outputElem = $("#output");
const outputMarkupElem = $("#output-markup");
renderMarkdownBtnElem.on("click", () => {
const input = inputElem.val();
const output = renderer.render(input);
console.log("Rendered", output);
outputElem.html(output);
outputMarkupElem.text(output);
});
});
</script>
</body>
</html>