convert markdown to json object

Question

I have a markdown file imported in a node module like this through a webpack loader

import mardownFile from './markdownfile.md'

this file is a text book with chapters separated by a ## / h2 tag

now, I'm looking for a way to convert this into a json object with each h2 tag (or other possible wrapper) in separate chapter chunks to use with a react page component with the page content as props.children. More details on what I'm trying to solve

I have this in my markdown.md file

#Title
##Chapter 1
text text
text
##Chapter 2
text
etc
##Chapter 3
more text
image

I would like to read this markdown and convert it to an object, something like this...

var aText = {
pages: [
{
 "title": "Chapter 1.",
 "text": "text",
},
{
"title": "Chapter 2.",
"text": "text",
},
{
"title": "Chapter 3.",
"text": "text",
"img": "cat-stevens.png",
}
]}

Then in a javascript react component render a Page component like this

<Page page={aText.pages[0]} />

I'm on a mac osx computer but this is personal web client project, I was trying to parse this in a standard browser, i'm using Chrome, What's the best approach to accomplish this, any suggestions?

Answer 1

You can not import md file, because import for only on javascript files. You need use some markdown parser or write your own. For example markdown-it:

var MarkdownIt = require('markdown-it');
var md = new MarkdownIt();
var result = md.parse('# markdown-it rulezz!');
console.log(result);

You will get:

[Token {
  type: 'heading_open',
  tag: 'h1',
  attrs: null,
  map: [0, 1],
  nesting: 1,
  level: 0,
  children: null,
  content: '',
  markup: '#',
  info: '',
  meta: null,
  block: true,
  hidden: false
},
  Token {
  type: 'inline',
  tag: '',
  attrs: null,
  map: [0, 1],
  nesting: 0,
  level: 1,
  children: [[Object]],
  content: 'markdown-it rulezz!',
  markup: '',
  info: '',
  meta: null,
  block: true,
  hidden: false
},
  Token {
  type: 'heading_close',
  tag: 'h1',
  attrs: null,
  map: null,
  nesting: -1,
  level: 0,
  children: null,
  content: '',
  markup: '#',
  info: '',
  meta: null,
  block: true,
  hidden: false
}]

Answer 2

Try the markdown-to-json library.

npm install -g markdown-to-json

Given a file called lottery.md I go to the directory in my terminal and type:

m2j lottery.md

This outputs the json on the screen.

If you're using a bash based terminal you can pipe that output into a file like this.

m2j lottery.md >> lottery.json

Which will create a json file called lottery.json in the same folder as your markdown.

For additional help you can use:

m2j -h

Answer 3

For my first search on this I've found the jsonmark package that is kinda what you have requested but it creates an object with order and contents which is not necessary and is hard to modify its code as it is based on regexp.

I agree with galkin's response that using a markdown parser's tokens should get you what you want.

Here is my example of how to create a json object based on markdown. My goal was to have a json array with elements that have a head and body, head is the h1 and body is all that goes beneath it. In the example I'm using marked as the markdown parser. (I'm Running it on nodejs as reading from file is not quite possible from file otherwise.)

var fs = require('fs');
var marked = require('./marked.min.js');
var finally = [];
var heading = '';
var lexbody = [];

var loadmd = function(file){
  var markdown = fs.readFileSync(file, 'utf8');
  jsonraw = marked.lexer(markdown);
  finally = [];
  heading = '';
  lexbody = [];
  jsonraw.forEach(getThem);
  return finally;
}
var getThem = function(item, index){
  if (item.type == "heading" && item.depth == 1){
    if (heading == ''){
      heading = item.text;
    } else {
      lexbody['links']=jsonraw.links;
      finally.push(
        {
          "heading": heading,
          "body": marked.parser(lexbody)
        }
      );
      heading = item.text;
      lexbody = [];
    }
  } else {
    lexbody.push(item);
  }
  // don't leave out the last element
  if (index == jsonraw.length-1){
    lexbody['links']=jsonraw.links;
    finally.push(
      {
        "heading": heading,
        "body": marked.parser(lexbody)
      }
    );
  }
}