docs: updated documentation after latest changes

Author: mlaursen

README.md

@@ -14,7 +14,7 @@ the
 npm install react react-marked-renderer
 ```
 
-Or with [yarn](https://yarnpkg.com)
+Or with [yarn](https://yarnpkg.com):
 
 ```sh
 yarn add react react-marked-renderer
@@ -65,15 +65,17 @@ add styles or additional functionality.
 import { useState } from "react";
 import { render } from "react-dom";
 import {
+  DEFAULT_MARKDOWN_RENDERERS,
   ListRenderer,
-  getTokensText,
   Markdown,
   Renderers,
+  getTokensText,
 } from "react-marked-renderer";
 import { BrowserRouter as Router, Link } from "react-router-dom";
 
-const renderers: Partial<Renderers> = {
-  link: function CustomLink({ href, title, children }: LinkRendererProps) {
+const renderers: Renderers = {
+  ...DEFAULT_MARKDOWN_RENDERERS,
+  link: function CustomLink({ href, title, children }) {
     // make links use html5 history and not cause reloads
     return (
       <Link to={href} title={title}>
@@ -128,11 +130,16 @@ function that will modify a `<code>` element to be highlighted:
 
 ```tsx
 import { render } from "react-dom";
-import { Markdown, Renderers } from "react-marked-renderer";
+import {
+  DEFAULT_MARKDOWN_RENDERERS,
+  Markdown,
+  Renderers,
+} from "react-marked-renderer";
 import Prism from "prismjs";
-// import prism theme/components or use babel-plugin-prismjs
+// import prism theme/components or use `babel-plugin-prismjs`
 
-const renderers: Partial<Renderers> = {
+const renderers: Renderers = {
+  ...DEFAULT_MARKDOWN_RENDERERS,
   codespan: function CodeSpan({ children }) {
     // just so it gets some prism styling
     return <code className="language-none">{children}</code>;
@@ -157,14 +164,16 @@ highlighted for SSR and in the browser, provide a `highlightCode` function:
 ```tsx
 import { render } from "react-dom";
 import {
-  CodeGetCodeLanguage,
+  DEFAULT_MARKDOWN_RENDERERS,
   DangerouslyHighlight,
+  GetCodeLanguage,
   Markdown,
   Renderers,
 } from "react-marked-renderer";
 import Prism from "prismjs";
 
-const renderers: Partial<Renderers> = {
+const renderers: Renderers = {
+  ...DEFAULT_MARKDOWN_RENDERERS,
   codespan: function CodeSpan({ children }) {
     // just so it gets some prism styling
     return <code className="language-none">{children}</code>;
@@ -178,7 +187,7 @@ const getLanguage: GetCodeLanguage = (lang, _rawCode) => {
   // if the Prism doesn't support the language, default to nothing instead
   // of crashing
   if (!Prism.languages[lang]) {
-    return "";
+    return "none";
   }
 
   return lang;

components/MarkdownPreview.tsx

@@ -25,7 +25,7 @@ export function MarkdownPreview(): ReactElement {
       <Markdown
         markdown={markdown}
         renderers={customRenderers ? renderers : undefined}
-        getLanguage={getLanguage}
+        getLanguage={customRenderers ? undefined : getLanguage}
         highlightCode={customRenderers ? highlightCode : undefined}
       />
     </div>

components/renderers.tsx

@@ -25,7 +25,6 @@ import styles from "./renderers.module.scss";
 const PRISM_LANGUAGES = Object.keys(languages).filter(
   (name) => name !== "insertBefore" && name !== "extend"
 );
-PRISM_LANGUAGES.push("none");
 
 export const renderers: MarkdownRenderers = {
   ...DEFAULT_MARKDOWN_RENDERERS,
@@ -87,10 +86,10 @@ export const renderers: MarkdownRenderers = {
     );
   },
 
-  codeblock: function CodeBlock({ lang = "", text }) {
+  codeblock: function CodeBlock({ lang, text }) {
     // allow `sh` alias for bash
     lang = lang === "sh" ? "bash" : lang;
-    const invalid = !PRISM_LANGUAGES.includes(lang);
+    const invalid = lang && !PRISM_LANGUAGES.includes(lang);
 
     let message: string | undefined;
     if (invalid) {
@@ -99,6 +98,8 @@ export const renderers: MarkdownRenderers = {
 Valid languages for the playground are:
 ${PRISM_LANGUAGES.map((lang) => `- ${lang}`).join("\n")}
 `;
+
+      lang = "none";
     }
 
     return (

src/Markdown.tsx

@@ -24,23 +24,8 @@ export interface BaseMarkdownProps extends HighlightCodeOptions {
   /**
    * Any options to use while parsing the markdown string.
    *
-   * Note: This will always be called as:
-   *
-   * ```ts
-   * const tokens = lexer(markdown, {
-   *   ...marked.getDefaults(),
-   *   mangle: false,
-   *   ...options,
-   * });
-   * ```
-   *
-   * The default options are always merged with the new options since most of
-   * the time you only want to change a few options instead of all of them.
-   * `marked` does not merge by default, so everything omitted will be set to
-   * `false`.
-   *
-   * In addition, the `mangle` option is set to `false` by default since it
-   * would prevent emails from being displayed correctly.
+   * @see {@link DEFAULT_MARKDOWN_OPTIONS}
+   * @defaultValue `DEFAULT_MARKDOWN_OPTIONS`
    */
   options?: Readonly<MarkdownOptions>;
 
@@ -75,6 +60,8 @@ export interface BaseMarkdownProps extends HighlightCodeOptions {
    *   document.getElementById("root")
    * );
    * ```
+   *
+   * @defaultValue = `new marked.Slugger()`
    */
   slugger?: marked.Slugger;
 
@@ -116,15 +103,17 @@ export type MarkdownProps = BaseMarkdownProps & ValidHighlightCodeOptions;
  * import { useState } from "react";
  * import { render } from "react-dom";
  * import {
+ *   DEFAULT_MARKDOWN_RENDERERS,
  *   ListRenderer,
- *   getTokensText,
  *   Markdown,
  *   Renderers,
+ *   getTokensText,
  * } from "react-marked-renderer";
  * import { BrowserRouter as Router, Link } from "react-router-dom";
  *
- * const renderers: Partial<Renderers> = {
- *   link: function CustomLink({ href, title, children }: LinkRendererProps) {
+ * const renderers: Renderers = {
+ *   ...DEFAULT_MARKDOWN_RENDERERS,
+ *   link: function CustomLink({ href, title, children }) {
  *     // make links use html5 history and not cause reloads
  *     return (
  *       <Link to={href} title={title}>
@@ -173,17 +162,23 @@ export type MarkdownProps = BaseMarkdownProps & ValidHighlightCodeOptions;
  * ```
  *
  * @example
- * Code Highlighting (PrismJS)
+ * PrismJS Code Highlighting (Browser)
  * ```tsx
  * import { render } from "react-dom";
- * import { Markdown, Renderers } from "react-marked-renderer";
+ * import {
+ *   DEFAULT_MARKDOWN_RENDERERS,
+ *   Markdown,
+ *   Renderers,
+ * } from "react-marked-renderer";
  * import Prism from "prismjs";
+ * // import prism theme/components or use `babel-plugin-prismjs`
  *
- * const renderers: Partial<Renderers> = {
+ * const renderers: Renderers = {
+ *   ...DEFAULT_MARKDOWN_RENDERERS,
  *   codespan: function CodeSpan({ children }) {
  *     // just so it gets some prism styling
- *     return <code className="language-none">{children}</code>
- *   }
+ *     return <code className="language-none">{children}</code>;
+ *   },
  * };
  *
  * render(
@@ -197,22 +192,24 @@ export type MarkdownProps = BaseMarkdownProps & ValidHighlightCodeOptions;
  * ```
  *
  * @example
- * SSR Code Highlighting (PrismJS)
+ * PrismJS Code Highlighting (Node an Browser)
  * ```tsx
  * import { render } from "react-dom";
  * import {
- *   CodeGetCodeLanguage,
+ *   DEFAULT_MARKDOWN_RENDERERS,
  *   DangerouslyHighlight,
+ *   GetCodeLanguage,
  *   Markdown,
- *   Renderers
+ *   Renderers,
  * } from "react-marked-renderer";
  * import Prism from "prismjs";
  *
- * const renderers: Partial<Renderers> = {
+ * const renderers: Renderers = {
+ *   ...DEFAULT_MARKDOWN_RENDERERS,
  *   codespan: function CodeSpan({ children }) {
  *     // just so it gets some prism styling
- *     return <code className="language-none">{children}</code>
- *   }
+ *     return <code className="language-none">{children}</code>;
+ *   },
  * };
  *
  * const getLanguage: GetCodeLanguage = (lang, _rawCode) => {
@@ -222,7 +219,7 @@ export type MarkdownProps = BaseMarkdownProps & ValidHighlightCodeOptions;
  *   // if the Prism doesn't support the language, default to nothing instead
  *   // of crashing
  *   if (!Prism.languages[lang]) {
- *     return "";
+ *     return "none";
  *   }
  *
  *   return lang;

src/renderers/useMarkdownRenderers.tsx

@@ -11,6 +11,9 @@ import {
 import { TableRenderers, TABLE_RENDERERS } from "./table";
 import { TextRenderers, TEXT_RENDERERS } from "./text";
 
+/**
+ * @see {@link DEFAULT_MARKDOWN_RENDERERS} for the default implementation
+ */
 export interface MarkdownRenderers
   extends CodeRenderers,
     HtmlRenderers,
@@ -20,6 +23,17 @@ export interface MarkdownRenderers
     TableRenderers,
     TextRenderers {}
 
+/**
+ * The default implementation for the {@link MarkdownRenderers}
+ *
+ * @see {@link CODE_RENDERERS}
+ * @see {@link HTML_RENDERERS}
+ * @see {@link LIST_RENDERERS}
+ * @see {@link MEDIA_RENDERERS}
+ * @see {@link PRESENTATIONAL_RENDERERS}
+ * @see {@link TABLE_RENDERERS}
+ * @see {@link TEXT_RENDERERS}
+ */
 export const DEFAULT_MARKDOWN_RENDERERS: MarkdownRenderers = {
   ...CODE_RENDERERS,
   ...HTML_RENDERERS,