feat(client): support source code syntax highlighting in statement text

judgels-client/src/components/LessonStatementCard/LessonStatementCard.jsx

@@ -1,5 +1,5 @@
 import { ContentCard } from '../ContentCard/ContentCard';
-import { KatexText } from '../KatexText/KatexText';
+import RichStatementText from '../RichStatementText/RichStatementText';
 
 import './LessonStatementCard.scss';
 
@@ -10,7 +10,7 @@ export function LessonStatementCard({ alias, statement }) {
         {alias}. {statement.title}
       </h2>
       <div className="lesson-statement__text">
-        <KatexText key={alias}>{statement.text}</KatexText>
+        <RichStatementText key={alias}>{statement.text}</RichStatementText>
       </div>
     </ContentCard>
   );

judgels-client/src/components/ProblemEditorial/ProblemEditorial.jsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 
 import { UserRef } from '../UserRef/UserRef';
-import { KatexText } from '../KatexText/KatexText';
+import RichStatementText from '../RichStatementText/RichStatementText';
 
 export function ProblemEditorial({ title, settersMap, profilesMap, children }) {
   const renderWriters = () => {
@@ -70,7 +70,7 @@ export function ProblemEditorial({ title, settersMap, profilesMap, children }) {
         {renderEditorialists()}
       </ul>
       <hr />
-      <KatexText key={title}>{children}</KatexText>
+      <RichStatementText key={title}>{children}</RichStatementText>
     </div>
   );
 }

judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemEditorialCard/ProblemEditorialCard.jsx

@@ -1,5 +1,5 @@
 import { ContentCard } from '../../../ContentCard/ContentCard';
-import { KatexText } from '../../../KatexText/KatexText';
+import RichStatementText from '../../../RichStatementText/RichStatementText';
 
 export function ProblemEditorialCard({ alias, statement: { title }, editorial: { text }, titleSuffix }) {
   return (
@@ -10,7 +10,7 @@ export function ProblemEditorialCard({ alias, statement: { title }, editorial: {
         {titleSuffix}
       </h2>
       <div className="programming-problem-statement__text">
-        <KatexText key={alias}>{text}</KatexText>
+        <RichStatementText key={alias}>{text}</RichStatementText>
       </div>
     </ContentCard>
   );

judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx

@@ -1,7 +1,7 @@
 import { HTMLTable } from '@blueprintjs/core';
 
 import { ContentCard } from '../../../ContentCard/ContentCard';
-import { KatexText } from '../../../KatexText/KatexText';
+import RichStatementText from '../../../RichStatementText/RichStatementText';
 
 import './ProblemStatementCard.scss';
 
@@ -45,7 +45,7 @@ export function ProblemStatementCard({ alias, statement: { title, text }, limits
         </tbody>
       </HTMLTable>
       <div className="programming-problem-statement__text">
-        <KatexText key={alias}>{text}</KatexText>
+        <RichStatementText key={alias}>{text}</RichStatementText>
       </div>
     </ContentCard>
   );

judgels-client/src/components/KatexText/KatexText.jsx → judgels-client/src/components/RichStatementText/RichStatementText.jsx

@@ -1,10 +1,15 @@
-import { createRef, PureComponent } from 'react';
+import HTMLReactParser from 'html-react-parser';
+import render from 'preact-render-to-string';
+import { createRef, Component } from 'react';
+import { connect } from 'react-redux';
 
 import { HtmlText } from '../HtmlText/HtmlText';
+import { SourceCode } from '../SourceCode/SourceCode';
+import { selectIsDarkMode } from '../../modules/webPrefs/webPrefsSelectors';
 
-import './KatexText.scss';
+import './RichStatementText.scss';
 
-export class KatexText extends PureComponent {
+export class RichStatementText extends Component {
   ref;
 
   constructor(props) {
@@ -54,10 +59,27 @@ export class KatexText extends PureComponent {
   }
 
   render() {
+    const { isDarkMode, children } = this.props;
+
+    let str = children;
+
+    str = str.replace(/<pre data-lang="(.+?)">(.*?)<\/pre>/gs, (match, lang, code) => {
+      return render(
+        <SourceCode isDarkMode={isDarkMode} language={lang} showLineNumbers={false}>
+          {HTMLReactParser(code.trim())}
+        </SourceCode>
+      );
+    });
+
     return (
-      <div className="katex-wrapper" ref={this.ref}>
-        <HtmlText>{this.props.children}</HtmlText>
+      <div className="rich-statement-text" ref={this.ref}>
+        <HtmlText>{str}</HtmlText>
       </div>
     );
   }
 }
+const mapStateToProps = state => ({
+  isDarkMode: selectIsDarkMode(state),
+});
+
+export default connect(mapStateToProps)(RichStatementText);

judgels-client/src/components/KatexText/KatexText.scss → judgels-client/src/components/RichStatementText/RichStatementText.scss

@@ -1,6 +1,6 @@
 @import '../../styles/base';
 
-.katex-wrapper {
+.rich-statement-text {
   .katex {
     font-size: 16px !important;
   }

judgels-client/src/components/SourceCode/SourceCode.jsx

@@ -20,14 +20,14 @@ registerLanguage('pascal', pascal);
 registerLanguage('python', python);
 registerLanguage('rust', rust);
 
-function SourceCode({ isDarkMode, language, children }) {
+export function SourceCode({ isDarkMode, language, showLineNumbers = true, children }) {
   return (
     <SyntaxHighlighter
       className="source-code"
       style={isDarkMode ? tomorrow : coy}
       language={language}
       wrapLines={true}
-      showLineNumbers={true}
+      showLineNumbers={showLineNumbers}
       lineNumberContainerStyle={{
         backgroundColor: isDarkMode ? '#394B59' : '#f0f0f0',
         float: 'left',

judgels-client/src/styles/index.scss

@@ -165,7 +165,13 @@ pre {
 }
 
 pre.source-code {
-  background-color: inherit !important;
+  border-color: #cccccc;
+  background-color: #f5f5f5 !important;
+}
+
+.bp4-dark pre.source-code {
+  border-color: $dark-gray2;
+  background-color: $dark-gray3 !important;
 }
 
 em {