Skip to content
This repository has been archived by the owner on Jun 14, 2024. It is now read-only.

Commit

Permalink
Make syntax highlighting work when client JS is disabled
Browse files Browse the repository at this point in the history
PrismLight will have access to all syntaxes on the server side and provide
syntax-highlighted code blocks in HTML.  PrismAsyncLight will download
only the necessary syntaxes on the client to hydrate the code blocks.

This seems to work fine right here, but I noticed some server/client
mismatches in dev on my own site.  There are PRs up to fix those problems:

react-syntax-highlighter/react-syntax-highlighter#361
react-syntax-highlighter/react-syntax-highlighter#362
  • Loading branch information
fracture91 committed Apr 27, 2021
1 parent ca26b53 commit 1f28d34
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion components/Code.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import React from 'react';
import darcula from 'react-syntax-highlighter/dist/cjs/styles/prism/darcula';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { PrismLight, PrismAsyncLight } from "react-syntax-highlighter"

const SyntaxHighlighter =
typeof window === "undefined" ? PrismLight : PrismAsyncLight

export default class Code extends React.PureComponent<{
language: string;
Expand Down

0 comments on commit 1f28d34

Please sign in to comment.