How to use the documentation/src/output/util/formatters function in documentation

import React from 'react';
import GithubSlugger from 'github-slugger';
import createFormatters from 'documentation/src/output/util/formatters';
import LinkerStack from 'documentation/src/output/util/linker_stack';
import docs from '../components/api.json'; // eslint-disable-line import/no-unresolved
import ApiItem from '../components/api-item';
import Icon from '@mapbox/mr-ui/icon';

const linkerStack = new LinkerStack({})
    .namespaceResolver(docs, (namespace) => {
        const slugger = new GithubSlugger();
        return `#${slugger.slug(namespace)}`;
    });

const formatters = createFormatters(linkerStack.link);

class ApiItemMember extends React.Component {
    constructor(props) {
        super(props);
        this.state = {disclosed: false};
        this.hashChange = this.hashChange.bind(this);
    }

    href = m => `#${m.namespace.toLowerCase()}`

    render() {
        const member = this.props;
        return (
            <div>
                <div id="{member.namespace.toLowerCase()}" style="{{">
                <div></div></div></div>

import LinkerStack from 'documentation/src/output/util/linker_stack';
import GithubSlugger from 'github-slugger';
import {highlightJavascript} from '../components/prism_highlight.js';
import docs from '../components/api.json'; // eslint-disable-line import/no-unresolved
import ApiItemMember from './api-item-member';
import IconText from '@mapbox/mr-ui/icon-text';
import Feedback from '@mapbox/dr-ui/feedback';
import constants from '../constants';

const linkerStack = new LinkerStack({})
    .namespaceResolver(docs, (namespace) => {
        const slugger = new GithubSlugger();
        return `#${slugger.slug(namespace)}`;
    });

const formatters = createFormatters(linkerStack.link);

class ApiItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            userName: undefined
        };
    }

    componentDidMount() {
        MapboxPageShell.afterUserCheck(() => {
            this.setState({ userName: MapboxPageShell.getUser() ?
                MapboxPageShell.getUser().id :
                undefined});
        });

const meta = {
    title: 'API Reference',
    description: 'The Mapbox GL JS API documentation to render interactive maps from vector tiles and Mapbox styles.',
    pathname: '/mapbox-gl-js/api/',
    contentType: 'API',
    lanaguage: ['JavaScript']
};

const linkerStack = new LinkerStack({})
    .namespaceResolver(docs, (namespace) => {
        const slugger = new GithubSlugger();
        return `#${slugger.slug(namespace)}`;
    });

const formatters = createFormatters(linkerStack.link);

function md(ast, inline) {
    if (inline && ast && ast.children.length && ast.children[0].type === 'paragraph') {
        ast = {
            type: 'root',
            children: ast.children[0].children.concat(ast.children.slice(1))
        };
    }
    return <span>;
}

class Note extends React.Component {
    render() {
        const note = this.props;
        return (
            <div></div></span>