feat(markdown): support syntax highlighting (#265)

components/code-block.tsx

@@ -1,4 +1,5 @@
 import { css, cx } from "@linaria/core";
+import Highlight, { defaultProps } from "prism-react-renderer";
 import * as React from "react";
 import { useIntl } from "react-intl";
 
@@ -59,58 +60,95 @@ export const CodeBlock: React.VFC<CodeBlockProps> = ({
  }
  `}
  >
- <code
- className={css`
- color: #cfcfcf;
-
- & .selector,
- & .keyword,
- & .operator {
- color: #ff6b6b;
+ <Highlight {...defaultProps} code={value} language={language as any}>
+ {({ className, tokens, getTokenProps }) => {
+ const elements: React.ReactElement[] = [];
+
+ for (const [i, line] of tokens.entries()) {
+ console.log(i, line);
+
+ for (const [j, token] of line.entries()) {
+ const { className, children } = getTokenProps({ token, j });
+
+ // prism outputs single new-line character node for empty line
+ // remove this since we manually add new-line character element for each line
+ if (children === "\n") {
+ continue;
+ }
+
+ elements.push(
+ <span className={className} key={`${i}-${j}`}>
+ {children}
+ </span>
+ );
+ }
+
+ elements.push(
+ <span className="token plain" key={`${i}-nl`}>
+ {"\n"}
+ </span>
+ );
  }
 
- & .property {
- color: #54a0ff;
- }
-
- & .parameter {
- color: #abb2bf;
- }
-
- & .attr-name,
- & .function {
- color: #ff9ff3;
- }
- & .punctuation {
- color: #abb2bf;
- }
- & .class-name,
- & .maybe-class-name {
- color: #feca57;
- }
- & .constant,
- & .number,
- & .unit,
- & .interpolation,
- & .pseudo-element {
- color: #ff9f43;
- }
- & .string,
- & .attr-value {
- color: #1dd1a1;
- }
- & .hexcode {
- color: #00d2d3;
- }
-
- & .comment {
- color: #576574;
- }
- `}
- ref={codeRef}
- >
- {value}
- </code>
+ return (
+ <code
+ className={cx(
+ css`
+ color: #cfcfcf;
+
+ & .selector,
+ & .keyword,
+ & .operator {
+ color: #ff6b6b;
+ }
+
+ & .property {
+ color: #54a0ff;
+ }
+
+ & .parameter {
+ color: #abb2bf;
+ }
+
+ & .attr-name,
+ & .function {
+ color: #ff9ff3;
+ }
+ & .punctuation {
+ color: #abb2bf;
+ }
+ & .class-name,
+ & .maybe-class-name {
+ color: #feca57;
+ }
+ & .constant,
+ & .number,
+ & .unit,
+ & .interpolation,
+ & .pseudo-element {
+ color: #ff9f43;
+ }
+ & .string,
+ & .attr-value {
+ color: #1dd1a1;
+ }
+ & .hexcode {
+ color: #00d2d3;
+ }
+
+ & .comment {
+ color: #576574;
+ }
+ `,
+ className
+ )}
+ ref={codeRef}
+ >
+ {elements}
+ </code>
+ );
+ }}
+ </Highlight>
  </div>
 
  <button

components/localized-link.tsx

@@ -35,7 +35,11 @@ export const LocalizedLink: React.FC<LocalizedLinkProps> = ({
 
  return (
  <Link
- href={{ pathname: hrefUrl.pathname, search: hrefUrl.search }}
+ href={{
+ pathname: hrefUrl.pathname,
+ search: hrefUrl.search,
+ hash: hrefUrl.hash,
+ }}
  as={{ pathname: asUrl.pathname, search: asUrl.search, hash: asUrl.hash }}
  {...props}
  />

package.json

@@ -38,6 +38,7 @@
  "next": "^10.0.8",
  "normalize.css": "^8.0.1",
  "polished": "^4.1.1",
+ "prism-react-renderer": "^1.2.0",
  "react": "^16.14.0",
  "react-dom": "^16.14.0",
  "react-intl": "^5.13.2",