unifiedでMarkdownをHTMLに変換 & ReactでQiitaっぽい目次を作る

import remark from 'remark'
import visit from 'unist-util-visit'
import mdastToString from 'mdast-util-to-string';
import GithubSlugger from 'github-slugger';
const githubSlugger = new GithubSlugger()

// マークダウン文字列から目次情報を抽出する
function _extractToc(rawMarkdownBody) {
  githubSlugger.reset();

  const result = []
  const ast = remark().parse(rawMarkdownBody);  visit(ast, 'heading', child => {    const value = child.children[0].value    const id = githubSlugger.slug(value || mdastToString(child))    const depth = child.depth    result.push({      value,      id,      depth    })  })
  return result
}

import React from 'react';
import { throttle } from 'lodash';
import Toc from './toc';

const githubSlugger = new GithubSlugger()


class ScrollSyncToc extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.toc = _getToc(this.props.rawMarkdownBody)

    this.state = {
      activeItemIds: [],
      itemTopOffsets: [],
    };

    this.calculateItemTopOffsets = this.calculateItemTopOffsets.bind(this);
    this.handleScroll = throttle(this.handleScroll.bind(this), 100) // 負荷軽減のため間引く  }

  componentDidMount() {    this.calculateItemTopOffsets();    window.addEventListener(`scroll`, this.handleScroll);  }
  componentWillUnmount() {    window.removeEventListener(`scroll`, this.handleScroll);  }
  calculateItemTopOffsets() {
    this.setState({
      itemTopOffsets: _getElementTopOffsetsById(this.toc),
    });
  }

  handleScroll() {    const { itemTopOffsets } = this.state;    const item = itemTopOffsets.find((current, i) => {      const next = itemTopOffsets[i + 1]      // 自章よりもスクロールしている      // かつ 次章まではスクロールしていない 場合は      // 自章が表示されているとみなす      return next        ? window.scrollY >= current.offsetTop &&            window.scrollY < next.offsetTop        : window.scrollY >= current.offsetTop;    })    // Qiitaっぽく自章とあわせて親章をハイライトさせたいので    // itemTopOffsetsでは親章の参照も持たせておき    // ここでactiveItemIdsに格納しています。    const activeItemIds =      item        ? item.parents          ? [item.id, ...item.parents.map(i => i.id)]          : [item.id]        : [];    // setStateを介してstateを変更することで    // 表示中の章に変更があった場合にのみ再描画が走ります。    this.setState({activeItemIds});  }
  render() {
    const { activeItemIds } = this.state;
    return <Toc activeItemIds={activeItemIds} toc={this.toc} {...this.props} />;
  }
}

import React from 'react'
import { HashLink as Link } from 'react-router-hash-link';

class Toc extends React.Component {
  render() {
    const { toc, activeItemIds } = this.props;
    const items = toc.map(item => {
      return (
        <li style={{
          textAlign: 'left',
          marginLeft: `${(item.depth - 2) * 24}px`,
          listStyle: 'none'
          }}>
          <Link
            key={item.id}
            to={`#${item.id}`}
            className={activeItemIds.includes(item.id) ? 'active' : ''}>{item.value}</Link>        </li>
      )
    })

    return (
      <ul style={{padding: '12px', background: '#eee'}}>
        {items}
      </ul>
    );
  }
}

export default Toc;