acdlite / react-remarkable

A React component for rendering Markdown with remarkable

react-remarkable

A React component for rendering Markdown with remarkable.

npm install --save react-remarkable

Usage

var React = require('react');
var Markdown = require('react-remarkable');

var MyComponent = React.createClass({

  render() {
    return (
      <div>
        {/* Pass Markdown source to the `source` prop */}
        <Markdown source="**Markdown is awesome!**" />

        {/* Or pass it as children */}
        {/* You can nest React components, too */}
        <Markdown>{`
          ## Reasons React is great

          1. Server-side rendering
          2. This totally works:

          <SomeOtherAmazingComponent />

          Pretty neat!
        `}</Markdown>
      </div>
    );
  }

});

Available props:

• options - Hash of Remarkable options
• source - Markdown source. You can also pass the source as children, which allows you to mix React components and Markdown.
• container - Element to use as container. Defaults to div.

Syntax Highlighting

Atom

You can enable syntax highlighting in Atom using the following steps:

Go to Settings > Packages > language-babel Settings > Enter this for JavaScript Tagged Literal Grammar Extensions:

"(?<=<Markdown>{)":source.gfm

Shortly you'll see that markdown syntax highlighting is enabled.

License

MIT

react-remarkable's Issues

Render custom markdown

I would to highlight #hashtags, is there a way to customize the rendered html by adding own custom markdowns, like the mentioned hashtag?

Linkify: true doesn't work for React 16.4.1

There is an error thrown when linkify is set to true:

    at Autolinker.replaceFn (linkify.js?5214:33)
    at Autolinker.createMatchReturnVal (Autolinker.js?287d:828)
    at Autolinker.link (Autolinker.js?287d:802)
    at Array.linkify (linkify.js?5214:109)
    at Core.process (parser_core.js?12d2:50)
    at Remarkable.parse (index.js?2259:138)
    at Remarkable.render (index.js?2259:152)
    at Remarkable.renderMarkdown (index.js?1e4d:76)
    at Remarkable.content (index.js?1e4d:58)
    at Remarkable.render (index.js?1e4d:42)```

not running under react 0.13.x

basically it's just caused by having a dependency on react:

https://github.com/acdlite/react-remarkable/blob/master/package.json#L11

removing the dependency on react would fix this.

Remove dangerouslySetInnerHTML

Was quite enthused to see this but turned out to be a wrapper. Is there any possibility of adding true React support via AST, along the lines of https://github.com/rexxars/react-markdown ?

That is the "correct" approach. React does DOM diffs, so with ASTs it will only render the changed parts instead of re-rendering everything like right now this repo does, which brings perf and other improvements.

Usage

Hi,

I actually can't get react-remarkable to output transformed Markdown passes as children.
I'm obviously missing something, and could use some hints.

Here is a narrowed down test with the example from the Readme.
https://codesandbox.io/s/kmwkzqqvor

Thanks.

Is there any possible danger with dangerInnerHTML?

sorry to bother you.

but I wonder is there any XSS attack problem? (React's dagnerInnerHTML)

I hope it solves that problem...

Open Links in New window

Hi Team,

Can you please help us having a feature to open links in new window

Thanks,
-Krishna

parsed content surrounded by span instead of div

In the code, the component statically renders a span with all the parsed html inside of it. This is causing invalid html.
I am hunting an issue, where mobile safari crashes with my web app. If I don't use react-remarkable, everything is fine.
On the net I found some hints, that mobile safari might crash due to invalid html. So I beg you to change the span to div. Span in this case is almost always wrong, since it is very likely, that there will be at least a p-tag inside of the generated html.

react-markdown-it does has error when compiled with webpack

@sunflowerdeath your fork does not have an issue tracker, so I am adding this issue here.

When react-markdown-it is compiled with webpack, we get the following message:

It might make sense to open up the issues page on your repo.

@acdlite sorry to post this here! one of the forks that is published under the name react-markdown-it does not have a issues page because it is a fork.

replace default components (i.e. <a> by <Link>)

I want to render relative links to my app (think a comments section), but I need to replace by to make this work.

New lines aren't respected

Doesn't seem like new lines for paragraphs are respected when you pass a string into .

Here's what I have:

<Markdown>
            ### 1.0 Got 15 minutes to learn how to value Facebook ###

            Come up with your own ‘fair value’ for stock, using the discounted cash flow (DCF)
            method in five easy steps. In this interactive walkthrough, we’ll show you how to
            calculate your own estimate for a ‘stock price’ by valuing the cash you think the
            company can generate.

            Pick one of these companies to start:
</Markdown>

Resulting in:

Children components

I am getting this when sending inner components to the Markdown, how come?

Obviously, theres something I'm missing in order to pass children to it, could you help me out?
Appreciated! 😄

Inline components

Is there any way to have a component be placed inline with text?

Right now, I'm using some components that represent LaTeX blocks, and this would be allow supporting inline math.

Readme is wrong

Readme says:
container - Element to use as container. Defaults to span.

I looked in the source code, and it says:

getDefaultProps: function getDefaultProps() {
    return {
      container: 'div',
      options: {} };
  },

The Readme just needs to be updated to say "div" instead of "span".

Unsafe lifecycle methods were found within a strict-mode tree

Running React >= 16.3 with React.StrictMode results in the following warning

index.js:2178 Warning: Unsafe lifecycle methods were found within a strict-mode tree:
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:13)
in Provider (at App.js:12)
in Unknown (at index.js:42)
componentWillUpdate: Please update the following components to use componentDidUpdate instead: Remarkable
Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

Just curious, what are the benefits?

I got here as i was thinking about doing similar for react but after some reading of dangerouslySetInnerHTML source code, it looks like it will not be using virtualdom, then what is the point of all this code? while we can simply render once component is rendered.

I didn't mean to question you but trying to see if i am missing anything.

Project status

Hello,
Is this project still maintained ? Last commit is 2 years old and some PRs are marked LGTM since a while.
I'd be happy to help out if you are looking for co-maintainers ;)
Cheers!

Do you have to install and configure https://highlightjs.org/

My syntax highlighting does not work. Do you have to add support for highlight.js?

Uncaught TypeError: Cannot set property 'Autolinker' of undefined

I'm trying to use with React webpack project
(function (root, factory) {
if (true) {
// AMD. Register as an anonymous module unless amdModuleId is set
!(WEBPACK_AMD_DEFINE_ARRAY = [], WEBPACK_AMD_DEFINE_RESULT = function () {
return root['Autolinker'] = factory();
}.apply(exports, WEBPACK_AMD_DEFINE_ARRAY), WEBPACK_AMD_DEFINE_RESULT !== undefined && (module.exports = WEBPACK_AMD_DEFINE_RESULT));
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
root['Autolinker'] = factory();
}

Example with JS syntax highlight

I know it is probably the wrong place to ask.

Any chance of finding an example with react-remarkable that includes JS code highlight?

I have tried everything :(

Mix React components and Markdown when using source attribute

Here's my use case. Let's say I have the following string stored in my database:

** here is some markdown**
<SomeOtherAmazingComponent />
Pretty neat!

I would like to take that string, and then render it as markdown while also rendering out the SomeOtherAmazingComponent component as a React component (instead of just showing the string <SomeOtherAmazingComponent/> in the middle of my markdown content).

Is this possible?