feat(v2): allow custom heading component

CHANGELOG-2.x.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - Use contenthash instead of chunkhash for better long term caching
+- Allow user to customize generated heading from MDX. Swizzle `@theme/Heading`
 
 ## 2.0.0-alpha.23
 

packages/docusaurus-mdx-loader/src/index.js

@@ -11,11 +11,10 @@ const emoji = require('remark-emoji');
 const slug = require('remark-slug');
 const matter = require('gray-matter');
 const stringifyObject = require('stringify-object');
-const linkHeadings = require('./rehype/linkHeadings');
 const rightToc = require('./remark/rightToc');
 
 const DEFAULT_OPTIONS = {
-  rehypePlugins: [linkHeadings],
+  rehypePlugins: [],
   remarkPlugins: [emoji, slug, rightToc],
 };
 

packages/docusaurus-theme-classic/src/theme/Heading/index.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+
+import './styles.css';
+
+const Heading = Tag => ({id, ...props}) => (
+  <Tag {...props}>
+    <a aria-hidden="true" className="anchor" id={id} />
+    <a aria-hidden="true" className="hash-link" href={`#${id}`}>
+      #
+    </a>
+    {props.children}
+  </Tag>
+);
+
+export default Heading;

packages/docusaurus-theme-classic/src/theme/Heading/styles.css

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.anchor {
+  display: block;
+  position: relative;
+  top: -5rem;
+}
+
+@media only screen and (max-width: 735px) {
+  .anchor {
+    top: -10rem;
+  }
+}
+
+.hash-link {
+  opacity: 0;
+  position: absolute;
+  margin-left: -1.25rem;
+  padding-right: 1.25rem;
+}
+
+*:hover > .hash-link {
+  opacity: 1;
+}

packages/docusaurus-theme-classic/src/theme/Layout/styles.css

@@ -10,26 +10,3 @@ body {
   padding-top: var(--ifm-navbar-height);
   transition: var(--ifm-transition-fast) ease color;
 }
-
-.anchor {
-  display: block;
-  position: relative;
-  top: -5rem;
-}
-
-@media only screen and (max-width: 735px) {
-  .anchor {
-    top: -10rem;
-  }
-}
-
-.hash-link {
-  opacity: 0;
-  position: absolute;
-  margin-left: -1.25rem;
-  padding-right: 1.25rem;
-}
-
-*:hover > .hash-link {
-  opacity: 1;
-}

packages/docusaurus-theme-classic/src/theme/MDXComponents/index.js

@@ -7,6 +7,7 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
+import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
 export default {
@@ -19,4 +20,10 @@ export default {
   },
   a: Link,
   pre: props => <pre className={styles.mdxCodeBlock} {...props} />,
+  h1: Heading('h1'),
+  h2: Heading('h2'),
+  h3: Heading('h3'),
+  h4: Heading('h4'),
+  h5: Heading('h5'),
+  h6: Heading('h6'),
 };