How do I import Remark in React.js?

[hyunwoona]

I want to embed a simple Remark presentation in my React App.

I tried importing Remark from remark-slide package on npm, and also from the remark.min.js file downloaded from the CDN.

import remark from 'remark-slide';

class Pre extends React.Component {
  componentDidMount() {
    const options = {
      source: 'abcd\n\n##asdfqwer',
      container: this.pre,
    };
    console.log(remark); // doesn't have the members like create()

    let slideshow = remark.create(); // fails

  render() {
      return (<div
        ref={(pre) => { this.pre = pre; }}
      ></div>);
  }
}

What is wrong and how can I fix this? Thank you.

[cjoshmartin]

@hyunwoona I think you are missing a ending bracket ( } ) at the end of your componentDidMount.

[peterj]

@hyunwoona did you solve this issue?

[joapuiib]

Hi,

I'm taking advantage of this issue since I have the same problem. I'm not using React, but I have the same problem (it can't find the create method).

This is the error I get:

Uncaught TypeError: t(...).create is not a function
    at HTMLDocument.<anonymous> (slides.js:2)
    at c (slides.js:2)
    at d (slides.js:2)

This is my code slides.js:

import 'jquery';
import remark from 'remark-slide';

$(function(){
    console.log(remark)
    var slideshow = remark.create({
        highlightStyle: "idea",
        highlightLanguage: "java"
    });
    ...
});

The output from console.log is:

ƒ p(e){this.dom=e||new u,this.macros=m,this.version=s.version}

I downloaded the library with npm i remark-slide, with the version 0.14.0 (It would be great to have 0.15 in npm, btw).

Thanks in advance.

[jangxyz]

This issue seems years old but since there is no update, let me share my experience as a reference. This is based on "[email protected]" and "[email protected]".

loading remark in browsers by <script> tag loads src/remark.js and does the following steps:

1. create a new instance of Api and bind it to windows.remark
2. apply polyfills
3. inject a default style element

However, installing via npm and importing it, you are given with only the Api object. So you need to do the stuff above by yourself.

Here's a react snippet I managed to make it work: (you can see it running in codesandbox)

import React from "react";

import Remark from "remark-slide";
import RemarkPolyfills from "remark-slide/src/polyfills";
import RemarkStyler from "remark-slide/src/remark/components/styler/styler";

const remark = new Remark();

export default function App() {
  const containerRef = React.useRef();
  const source = `
  class: center, middle
  
  # Title
  
  ---
  
  # Agenda
  
  1. Introduction
  2. Deep-dive
  3. ...
  
  ---
  
  # Introduction
  `.trim();

  React.useEffect(() => {
    RemarkPolyfills.apply();
    RemarkStyler.styleDocument();
    remark.create({
      source,
      container: containerRef.current
    });
  }, []);

  return (
    <div className="App">
      <h1>Remark</h1>
      <textarea
        defaultValue={source}
        style={{
          width: "100%"
        }}
        rows={10}
      />
      <div
        ref={containerRef}
        style={{
          width: 480,
          height: 320,
          border: "1px solid gray"
        }}
      />
    </div>
  );
}

However, you should understand that remark and react does not go well together, because they both try to render the dom by themselves. Remark seems to have come up with a whole library dealing with dom.

[ivorc]

@jangxyz nice, but one small thing is that --- doesn't seem to be interpreted as a slide break, it's just rendering as <hr>. Did you get to the bottom of why that is and how to make Remark treat that as indicating a new slide?

UPDATE: If the source template string is outdented so that the two space indent for each line is removed this works 👍