aframe-markdown

aframe-markdown

Renders Markdown using SDF text in a-frame.

Demos: https://brianpeiris.github.io/aframe-markdown/demos/

Glitch: https://aframe-markdown.glitch.me/

Usage

<a-scene 
  markdown="
    normalFont: https://unpkg.com/aframe-markdown/fonts/Roboto-msdf.json; 
    boldFont: https://unpkg.com/aframe-markdown/fonts/Roboto-Bold-msdf.json;
  "
>
  <a-assets>
	<a-asset-item id="md" src="test.md"></a-asset-item>
  </a-assets>
  <a-entity markdown="src: #md" position="0 1.5 -1"></a-entity>
</a-scene>

Component Properties

Properties	Description	Default
src	The source for the markdown to render. Either the actual markdown text, or a selector to an a-asset-item that loads the markdown
wrapCount	Number of characters before wrapping text (more or less).	40
padding	Padding in meters between the background and the text	0.05

System Properties

Properties	Description	Default
normalFont	URL to the msdf.json file for the normal weight font
normalFont	URL to the msdf.json file for the bold font

Supported Markdown Features

aframe-markdown supports a basic subset of markdown.

• Paragraphs
  • Line breaks
• Headers
• Images
• Lists
  • Nested lists
  • Unordered lists
  • Ordered lists
• Inline bold and italic formatting
• Blockquotes
• Horizontal rules
• Tables
• Code
  • Inline code
  • Code blocks
• Links

How it works

aframe-markdown uses a hidden div and marked.js to render the markdown in the background and then re-creates the rendered in a-frame using the HTML's metrics.