feat: add PrismFormatted #303

huyenltnguyen · 2024-09-06T00:35:47Z

Checklist:

I have read freeCodeCamp's contribution guidelines.
My pull request has a descriptive title (not a vague title like Update index.md)

This PR adds PrismFormatted component to the library.

This component is cloned from the main repo (https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/templates/Challenges/components/prism-formatted.tsx) with some small adjustments.

Screenshots

	Light	Dark
Default
With line numbers

huyenltnguyen · 2024-09-08T22:34:45Z

.babelrc.js

+	plugins: [
+		["transform-react-remove-prop-types", { removeImport: true }],
+		[
+			"prismjs",


Setup the babel-plugin-prismjs plugin.

The config is copied from https://github.com/freeCodeCamp/freeCodeCamp/blob/f1931399a1663f134a80744d3bcb6777d261f96c/client/.babelrc.js#L37-L58.

huyenltnguyen · 2024-09-08T22:42:11Z

.storybook/preview.js

@@ -18,7 +18,7 @@ export const parameters = {
 			},
 			{
 				name: "dark-palette",
-				value: "#0a0a23",
+				value: "#1b1b32",


I'm changing the background color to match the one we use on /learn (gray90 to gray85).

Without this change, we can't see the code block properly.

Comparison

#0a0a23 #1b1b32

huyenltnguyen · 2024-09-08T22:49:01Z

jest.config.ts

+	// Stub out CSS as Jest would try to parse the imported stylesheets as JS modules
+	// and throw an error as it can't transpile the code.
+	// Ref: https://github.com/jestjs/jest/issues/3094#issuecomment-385164816
+	moduleNameMapper: {
+		"\\.css": "<rootDir>/__mocks__/styleMock.ts",
+	},


Jest couldn't run prism-formatted.test.tsx because it was trying (and failed) to parse both prismjs and our CSS files.

Screenshot of the failure

huyenltnguyen · 2024-09-08T22:52:48Z

src/base.css

@@ -29,7 +29,7 @@
 		@apply bg-background-tertiary text-foreground-tertiary;
 	}
 	:not(pre) > code {
-		@apply border-1 border-gray-450;
+		@apply border-1 border-gray-450 px-[4px] py-[1px];


Add some padding to inline code.

Site note (mostly for future me): This :not(pre) > code rule is to cover the case where the consumers don't use PrismFormatted to render strings that contain <code> tags.

huyenltnguyen · 2024-09-08T22:54:04Z

src/base.css

@@ -40,6 +40,7 @@
 	h6,
 	p {
 		margin-bottom: 12.5px;
+		color: var(--foreground-primary);


Add a default text color to text elements.

huyenltnguyen · 2024-09-08T23:43:12Z

src/prism-formatted/prism-dark.css

+/* Without this, the above selector takes precedence and messes up the answer
+ padding in night mode */
+.dark-palette .video-quiz-option > pre {
+	padding: 0;
+	margin: 0;
+}


I think this rule should be removed as the video-quiz-option class is specific to /learn. Though I'll need to integrate PrismFormatted into Quiz/QuizQuestion so the rule could possibly be moved there.

I'm keeping the rule for now to be safe.

huyenltnguyen · 2024-09-08T23:48:07Z

src/prism-formatted/prism-formatted.tsx

+/**
+ * PrismFormatted is used to render code blocks with syntax highlighting.
+ *


This wall of text is for the component's description, displayed at the top of the Storybook page.

Screenshot

huyenltnguyen · 2024-09-08T23:52:31Z

src/prism-formatted/prism-formatted.tsx

+	text,
+	useSpan,
+	noAria,
+	codeBlockAriaLabel,


In /learn, PrismFormatted automatically creates an aria label with i18next: https://github.com/freeCodeCamp/freeCodeCamp/blob/f1931399a1663f134a80744d3bcb6777d261f96c/client/src/templates/Challenges/utils/index.ts#L70-L75.

fcc/ui doesn't have localization so it needs the string to be passed in.

huyenltnguyen · 2024-09-08T23:55:51Z

src/prism-formatted/prism-formatted.tsx

+	useSpan,
+	noAria,
+	codeBlockAriaLabel,
+	hasLineNumbers,


To enable line numbers, we need to pass the line-numbers class to PrismJS (doc).

The PrismFormatted component in /learn also expects the consumers to pass in the class. But I find this a little error-prone (typo happens), so I decided to turn it into a boolean prop.

huyenltnguyen · 2024-09-09T00:10:22Z

src/prism-formatted/prism-light.css

@@ -0,0 +1,78 @@
+@import "../colors.css";
+
+.light-palette pre[class*="language-"]::selection,


The main different between this file and the original one is that:

The original uses the :not(.dark-palette) selector

This file uses the .light-palette selector

I guess we use :not(.dark-palette) in /learn because we need to account for both (.default and .light-palette). I think that was the case in the past, but it's probably standardized now, and we just use .light-palette or .dark-palette (https://github.com/freeCodeCamp/freeCodeCamp/blob/f1931399a1663f134a80744d3bcb6777d261f96c/client/src/components/layouts/default.tsx#L109-L114).

Note: this .light-palette pre[class*="language-"]::selection selector brings a discrepancy.

In /learn, we are still having this selector with .default, which has no effect, and allows PrismJS to apply its color: https://github.com/freeCodeCamp/freeCodeCamp/blob/f1931399a1663f134a80744d3bcb6777d261f96c/client/src/components/layouts/prism.css#L10-L15.

Changing .default to .light-palette allows the override to take effect.

Comparison

.default .light-palette

src/prism-formatted/utils.ts

ojeytonwilliams

Nice work, @huyenltnguyen. I'm not the best judge of css changes, but from what I can see everything looks great.

ahmaxed · 2024-09-10T13:30:49Z

Thanks for the hard work and the comments.

huyenltnguyen force-pushed the feat/prism-formatted branch 3 times, most recently from a3a8700 to 108947c Compare September 8, 2024 23:02

feat: add PrismFormatted

3f721f0

huyenltnguyen force-pushed the feat/prism-formatted branch from 108947c to 3f721f0 Compare September 8, 2024 23:03

huyenltnguyen commented Sep 9, 2024

View reviewed changes

huyenltnguyen marked this pull request as ready for review September 9, 2024 00:14

huyenltnguyen requested a review from a team as a code owner September 9, 2024 00:14

ojeytonwilliams requested changes Sep 9, 2024

View reviewed changes

src/prism-formatted/utils.ts Outdated Show resolved Hide resolved

src/prism-formatted/utils.ts Outdated Show resolved Hide resolved

huyenltnguyen added 2 commits September 10, 2024 03:28

fix: change codeBlockAriaLabel to getCodeBlockAriaLabel function

0b1c3f5

refactor: move enhancePrismAccessibility into prism-formatted.tsx

0ab27bd

huyenltnguyen force-pushed the feat/prism-formatted branch from a01e0b2 to 0ab27bd Compare September 9, 2024 20:31

huyenltnguyen added 2 commits September 10, 2024 03:38

docs: improve snippet code

4586a50

fix: remove getCodeLang export

c282559

huyenltnguyen mentioned this pull request Sep 9, 2024

Use PrismFormatted in QuizQuestion #305

Closed

ojeytonwilliams approved these changes Sep 10, 2024

View reviewed changes

ahmaxed merged commit d13eb3b into freeCodeCamp:main Sep 10, 2024
7 checks passed

huyenltnguyen deleted the feat/prism-formatted branch September 10, 2024 18:12

ojeytonwilliams mentioned this pull request Sep 16, 2024

fix: inlining code examples in upper jaw freeCodeCamp/freeCodeCamp#56119

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add PrismFormatted #303

feat: add PrismFormatted #303

huyenltnguyen commented Sep 6, 2024 •

edited

Loading

huyenltnguyen Sep 8, 2024

huyenltnguyen Sep 8, 2024

huyenltnguyen Sep 8, 2024

huyenltnguyen Sep 8, 2024

huyenltnguyen Sep 8, 2024

huyenltnguyen Sep 8, 2024

huyenltnguyen Sep 8, 2024

huyenltnguyen Sep 8, 2024

huyenltnguyen Sep 8, 2024

huyenltnguyen Sep 9, 2024

ojeytonwilliams left a comment

ahmaxed commented Sep 10, 2024

		@@ -0,0 +1,78 @@
		@import "../colors.css";

		.light-palette pre[class*="language-"]::selection,

feat: add PrismFormatted #303

feat: add PrismFormatted #303

Conversation

huyenltnguyen commented Sep 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ojeytonwilliams left a comment

Choose a reason for hiding this comment

ahmaxed commented Sep 10, 2024

huyenltnguyen commented Sep 6, 2024 •

edited

Loading