threepointone / markdown-in-js

inline markdown for react/jsx

markdown-in-js

zero-overhead markdown in your react components

usage

add 'markdown-in-js/babel' to the plugins field of your babel config

import markdown from 'markdown-in-js'

const App = () => markdown`
## This is some content.
You can write _markdown_ as you'd like.

${ <span> interpolate more <Content/> </span> }

you can <i>inline *html*</i> or even <OtherComponents/>, wow

<div style=${{ fontWeight: 'bold' }}
    className=${'some more styles'}
    onClick=${handler}>
  interpolate attributes as expected
</div>
`

• gets compiled to react elements via a babel plugin
• preserves interpolations
• built with commonmark
• optionally add prismjs for syntax highlighting of code blocks

custom components

You can use custom components for markdown primitives like so -

import md from 'markdown-in-js'
import { MyHeading, MyLink } from './path/to/components'

const App = () => md({ h1: MyHeading, a: MyLink })`
# this will be a custom header
[custom link component](/url/to/link)
`

todo

• optionally no-wrap paragraphs
• optionally return array of elements
• instructions for in-editor syntax highlighting
• add gotchas to docs
• precompile code blocks
• commonmark options
• tests!

markdown-in-js's Issues

How to interpolate block-level components?

Willing to come up with a PR if there are any ideas around how this API would work.

Right now my workaround is to wrap the interpolated component with a <div> so that it will render inside a div rather than a p.

markdown`
<div>
${<MyBlockLevelComponent />}
</div>
`

I'm wondering if there is a way to "detect" the tag name of the rendered component, or if we need to rely on an option passed into the markdown function, such as markdown({nowrap: [MyBlockLevelComponent]})

Syntax Highlighting

Hey,
super useful plugin, thanks. Do you know of a way to enable syntax highlighting? (Sublime Text 3)

Some notes

Hey man, this looks spectacular and I'll probably use it. Just thought I'd note a few things that I noticed:

In the README.md it says

add 'markdown-in-js/lib/babel' to the plugins field of your babel config

But in src/index.js the error you're throwing says:

you forgot to add 'markdown-in-js/babel' to your babel plugins

I think that the README is correct, but I'm not sure so I thought I'd bring it up 😄

Also, I noticed that in your example here you have:

import markdown from '../src' // so the linter won't complain

Which makes sense, I imagine that this isn't required at all by the plugin, but I'll bet that others may want to do the same and be unsure of what to do. Perhaps in the README we could mention that in the usage?

Parameterize `markdown`

It would be really cool if you could call this:

markdown`foo ${bar}`
markdown({ p: ParagraphComponent })`foo ${bar}`

this way:

markdown(['foo '], bar)
markdown({ p: ParagraphComponent })(['foo '], bar)

Then you could could pass the actual markdown content as parameters if you wanted to reuse the same customized component object. Does that make sense? I'm not sure if this is even possible with tagged template literals.

How to split into multiple pages

I am trying to split my markdown component in multiple pages. I simualte A4 paper pages using a react component. I would like to split it when then markdown document contains ---.

Is there a way you can think of so that i can iterate the generated react-elements and split them into different containers ? Thank you.

Better indentation handling

I ran into an issue when trying to next the md tagged template literals within the rest of a JSX element tree, the Markdown was render with <pre><code> formatting because my content was indented by 4+ spaces.

It would be great if this package did something like the dedent package: https://github.com/dmnd/dedent

Github-flavored markdown tables

What do you think about supporting gfm tables? Commonmark explicitly doesn't support them, but I use them pretty frequently and find them to be much more convenient compared to inlining a bunch of HTML.

I considered 4 implementations:

1. Allow multiple markdown parsers (sorta like what eslint does)
2. Fork commonmark and add table parsing
3. Use marked parser instead of commonmark
4. Just hack it in

Options 1 and 2 both sounded like a pain to write and maintain, and 3 seems maybe sensible but a pretty big, time-consuming change needing more discussion. So I went with 4, of course 😄

I hackily added them in using an excerpt from the marked parser. In my limited testing, it seems to work pretty well. I'm sure there are weird edge cases and gotchas, though. You can check it out here: #6.

Let me know what you think. I'm not really sure if this is the right direction, it was just the one I had time to hack in!

---

Example gfm table:

Left-aligned	Center-aligned	Right-aligned
git status	git status	git status
git diff	git diff	git diff

Issue with next.js and typescript

markdown-in-js is working fine for me when I use it in a next.js project like:

// .babelrc
{
  "presets": [
    "next/babel",
    "markdown-in-js/babel"
  ]
}

But as soon as I add "@zeit/next-typescript/babel" to the list of presets I get this error (without any changes on the code):

Is this an issue with markdown-in-js or should I open an issue on next-js?

Thanks

External files

Hey! If I've missed this somewhere, I'm sorry, but is there a way to use this plugin to support an external .md file?

I'm trying to do something like this:

import React from 'react'
import md from 'markdown-in-js'
import aboutPage from '../docs/about.md'

export default () => (
  <div className="entries">
    { md`${aboutPage}` }
  </div>

)

How to support emoji?

How to display emoji like ✨🐢🚀✨.

Backslash requires double escaping

Not sure if this is something that can be fixed or if it's a limitation of using babel, but if you want to have a \ character you need to write it like \\\\.

tsx support?

if the code is used in tsx, something strange happened......

Special Characters and code

I've been working on porting my gitbook markdown into react components rendered through markdown-in-js. However I run into several issues with the characters below. Those characters are often in prismjs codeblocks or inline blocks between text . I've gotten errors for these in the console but the errors point to basic text that aren't the cause of the error.

` > = < () # -

Are code block contents not escaped?

would it be possible to use this to denote codeblocks or inline-blocks to avoid having to escape characters:

@@@js
 //some code in here
@@@

some text @@inline code block@@ some text

Not sure if it's a good idea but I never really use that symbol twice anywhere.