TCA-352 - fix text formatting for code blocks

Author: vas3a

client/src/components/layouts/prism-night.css

@@ -6,7 +6,8 @@
  */
 
 .dark-palette code[class*='language-'],
-.dark-palette pre[class*='language-'] {
+.dark-palette code[class*='language-'],
+pre[class*='language-'].dark-palette {
   color: var(--secondary-color);
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   font-size: 1em;
@@ -28,11 +29,13 @@
   text-shadow: none;
 }
 
+pre[class*='language-'].dark-palette code[class*='language-'],
 .dark-palette pre[class*='language-'] code[class*='language-'] {
   color: var(--quaternary-color);
 }
 
 /* Code blocks */
+pre[class*='language-'].dark-palette,
 .dark-palette pre[class*='language-'] {
   padding: 1em;
   margin: 0.5em 0;
@@ -47,12 +50,15 @@ padding in night mode */
 }
 
 .dark-palette :not(pre) > code[class*='language-'],
+pre[class*='language-'].dark-palette,
 .dark-palette pre[class*='language-'] {
   background: var(--primary-background);
 }
 
 .dark-palette pre[class*='language-']::selection,
+pre[class*='language-'].dark-palette::selection,
 .dark-palette pre[class*='language-'] ::selection,
+pre[class*='language-'].dark-palette ::selection,
 .dark-palette code[class*='language-']::selection,
 .dark-palette code[class*='language-'] ::selection {
   background: var(--selection-color);

client/src/templates/Challenges/components/prism-formatted.tsx

@@ -4,17 +4,37 @@ import React, { useRef, useEffect } from 'react';
 interface PrismFormattedProps {
   className?: string;
   text: string;
+  lineNumbers?: boolean;
+  darkTheme?: boolean;
 }
 
-function PrismFormatted({ className, text }: PrismFormattedProps): JSX.Element {
+/**
+ * Add css formatting classes to the <pre> elements based on showLineNumbers and darkTheme params
+ * @param container
+ * @param showLineNumbers
+ * @param darkTheme
+ */
+const addFormattingClassesForPres = (container: HTMLElement, showLineNumbers = true, darkTheme = true) => {
+  const codeBlocks: HTMLElement[] = [].slice.call(container.querySelectorAll('[class*="language-"]'));
+  // we want to formatt the <pre> element, not the <code>, get parent if current element is not PRE
+  const preElements: HTMLPreElement[] = codeBlocks.map(c => (c.nodeName === 'PRE' ? c : c.parentElement) as HTMLPreElement);
+
+  for(const pre of preElements) {
+    pre.classList.toggle('line-numbers', showLineNumbers);
+    pre.classList.toggle('dark-palette', darkTheme);
+  }
+}
+
+function PrismFormatted({ className, text, ...props }: PrismFormattedProps): JSX.Element {
   const instructionsRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     // Just in case 'current' has not been created, though it should have been.
     if (instructionsRef.current) {
+      addFormattingClassesForPres(instructionsRef.current, props.lineNumbers, props.darkTheme);
       Prism.highlightAllUnder(instructionsRef.current);
     }
-  }, []);
+  }, [props.darkTheme, props.lineNumbers]);
 
   return (
     <div

client/src/templates/Challenges/video/Show.tsx

@@ -202,6 +202,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
     const blockNameTitle = `${t(
       `intro:${superBlock}.blocks.${block}.title`
     )} - ${title}`;
+
     return (
       <Hotkeys
         executeChallenge={() => this.handleSubmit(solution)}
@@ -245,10 +246,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                 className='video-description'
               >
                 <ChallengeDescription description={description} />
-                <PrismFormatted
-                  className={'dark-palette line-numbers'}
-                  text={text}
-                />
+                <PrismFormatted text={text} />
                 <Spacer />
                 <ObserveKeys>
                   <div className='video-quiz-options'>