search

javiercf / react-markdown-loader

This loader parses markdown files and converts them to a React Stateless Component. It will also parse FrontMatter to import dependencies and render components along with it’s source code. We developed this loader in order to make the process of creating styleguides for React components easier
145 stars 33 forks source link

How to leverage SPA Routing #18

Closed kennetpostigo closed 7 years ago

kennetpostigo commented 7 years ago

Hi i'm interested in using this but I'm not sure how to use this with react-router to get clean single page app transitions, do you think you can explain how to use both this with react-router?

tauren commented 7 years ago

I'm also running into problems on route changes. The first route that loads renders fenced code blocks properly using prismjs. However, on route change, any fenced blocks are not displayed properly.

Upon debugging the problem, I discovered that remarkable generates markup that looks like this:

<pre><code class="language-js">...</code></pre>

In order for the code blocks to be styled correctly, prism runs Prism.highlightAll() on initial load. This adds the language class to the <pre> tag which is necessary for the prism theme to render properly (especially obvious when using a dark theme):

<pre class="language-js"><code class="language-js">...</code></pre>

When the SPA route changes, it is necessary to call Prism.highlightAll() manually. I got things working by modifying react-markdown-loader so that build.js ends like this:

  return `
${doImports}
import Prism from 'prismjs';

export const attributes = ${JSON.stringify(camelize(frontMatterAttributes))};
export default class extends React.Component {
  componentDidMount () {
    Prism.highlightAll()
  }
  componentDidUpdate () {
    Prism.highlightAll()
  }
  render() {
    return (
      <div>
        ${jsx}
      </div>
    );
  }
};`;

Of course, this is creating a very tight coupling between my app and this plugin and certainly isn't suitable for general use. It seems that the lifecycle hooks need to be exposed to the consuming app somehow. Or perhaps the consuming app can define a template that is used to generate the component.

Note that you'll also need to include the prismjs assets into your page:

import 'prismjs';
import 'prismjs/themes/prism-okaidia.css';
kennetpostigo commented 7 years ago

@tauren I switched to react-markdown, it works amazing! I feed it markdown files and magic!