next-mdx-remote v4 (#737)

components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,97 @@
+.code {
+  position: relative;
+  width: 100%;
+  margin: 1em auto;
+}
+
+/* the following sub-classes MUST be global -- the highlight rehype plugin isn't aware of this file */
+
+.code :global(.code-highlight) {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+  tab-size: 2;
+  color: var(--code-text);
+  background-color: var(--code-background);
+}
+
+/* leave room for clipboard button to the right of the first line */
+.code :global(.code-highlight) > :global(.code-line:first-of-type) {
+  margin-right: 3em;
+}
+
+.code :global(.code-highlight) > :global(.code-line.line-number::before) {
+  display: inline-block;
+  width: 1.5em;
+  margin-right: 1.5em;
+  text-align: right;
+  color: var(--code-comment);
+  content: attr(line); /* added to spans by prism */
+}
+
+.code :global(.code-highlight) :global(.token.comment),
+.code :global(.code-highlight) :global(.token.prolog),
+.code :global(.code-highlight) :global(.token.cdata) {
+  color: var(--code-comment);
+}
+
+.code :global(.code-highlight) :global(.token.delimiter),
+.code :global(.code-highlight) :global(.token.boolean),
+.code :global(.code-highlight) :global(.token.keyword),
+.code :global(.code-highlight) :global(.token.selector),
+.code :global(.code-highlight) :global(.token.important),
+.code :global(.code-highlight) :global(.token.doctype),
+.code :global(.code-highlight) :global(.token.atrule),
+.code :global(.code-highlight) :global(.token.url) {
+  color: var(--code-keyword);
+}
+
+.code :global(.code-highlight) :global(.token.tag),
+.code :global(.code-highlight) :global(.token.builtin),
+.code :global(.code-highlight) :global(.token.regex) {
+  color: var(--code-namespace);
+}
+
+.code :global(.code-highlight) :global(.token.property),
+.code :global(.code-highlight) :global(.token.constant),
+.code :global(.code-highlight) :global(.token.variable),
+.code :global(.code-highlight) :global(.token.attr-value),
+.code :global(.code-highlight) :global(.token.class-name),
+.code :global(.code-highlight) :global(.token.string),
+.code :global(.code-highlight) :global(.token.char) {
+  color: var(--code-variable);
+}
+
+.code :global(.code-highlight) :global(.token.literal-property),
+.code :global(.code-highlight) :global(.token.attr-name) {
+  color: var(--code-attribute);
+}
+
+.code :global(.code-highlight) :global(.token.function) {
+  color: var(--code-literal);
+}
+
+.code :global(.code-highlight) :global(.token.tag .punctuation),
+.code :global(.code-highlight) :global(.token.attr-value .punctuation) {
+  color: var(--code-punctuation);
+}
+
+.code :global(.code-highlight) :global(.token.inserted) {
+  background-color: var(--code-addition);
+}
+
+.code :global(.code-highlight) :global(.token.deleted) {
+  background-color: var(--code-deletion);
+}
+
+.code :global(.code-highlight) :global(.token.url) {
+  text-decoration: underline;
+}
+
+.code :global(.code-highlight) :global(.token.bold) {
+  font-weight: bold;
+}
+
+.code :global(.code-highlight) :global(.token.italic) {
+  font-style: italic;
+}

components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,28 @@
+import CopyButton from "../CopyButton/CopyButton";
+import type { ReactNode } from "react";
+
+import styles from "./CodeBlock.module.css";
+
+export type Props = {
+  className?: string;
+  children: ReactNode;
+};
+
+const CodeBlock = (props: Props) => {
+  if (props.className?.split(" ").includes("code-highlight")) {
+    // full multi-line code blocks with prism highlighting and copy-to-clipboard button
+    return (
+      <>
+        <div className={styles.code}>
+          <CopyButton source={props.children} />
+          <code {...props}>{props.children}</code>
+        </div>
+      </>
+    );
+  } else {
+    // inline code in paragraphs, headings, etc. (not highlighted)
+    return <code {...props}>{props.children}</code>;
+  }
+};
+
+export default CodeBlock;