greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add code highlighting to descriptions in the new editor (#43740)

pull/43745/head
Kristofer Koishigawa 2021-10-06 18:26:22 +09:00 committed by GitHub
parent b0d48b8463
commit 580f57cf5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/templates/Challenges/classic/editor.tsx
View File

@ -7,6 +7,7 @@ import type {
Range as RangeType Range as RangeType
// eslint-disable-next-line import/no-duplicates // eslint-disable-next-line import/no-duplicates
} from 'monaco-editor/esm/vs/editor/editor.api'; } from 'monaco-editor/esm/vs/editor/editor.api';
import { highlightAllUnder } from 'prismjs';
import React, { import React, {
useEffect, useEffect,
Suspense, Suspense,
@ -450,6 +451,7 @@ const Editor = (props: EditorProps): JSX.Element => {
descContainer.appendChild(jawHeading); descContainer.appendChild(jawHeading);
descContainer.appendChild(desc); descContainer.appendChild(desc);
desc.innerHTML = description; desc.innerHTML = description;
highlightAllUnder(desc);
// TODO: the solution is probably just to use an overlay that's forced to // TODO: the solution is probably just to use an overlay that's forced to
// follow the decorations. // follow the decorations.
// TODO: this is enough for Firefox, but Chrome needs more before the // TODO: this is enough for Firefox, but Chrome needs more before the