diff --git a/babel.config.json b/babel.config.json index fc2f2236c6..f5c23ea7fb 100644 --- a/babel.config.json +++ b/babel.config.json @@ -2,5 +2,15 @@ "presets": [ [ "@babel/preset-env", { "targets": { "node": true } } ], [ "@babel/preset-react" ] + ], + "plugins": [ + [ + "prismjs", + { + "languages": ["js", "css", "yaml", "bash", "batch", "markup", "json", "powershell"], + "plugins": [], + "css": false + } + ] ] } \ No newline at end of file diff --git a/content/blog/gpg-signed-releases/index.md b/content/blog/gpg-signed-releases/index.md index 5a1f3f3d02..7b9fc587de 100644 --- a/content/blog/gpg-signed-releases/index.md +++ b/content/blog/gpg-signed-releases/index.md @@ -88,7 +88,7 @@ signatures. You can then run the following command to check the signature by su If you do not currently have the Adoptium project's public signing key you will get a message such as this: -```output +```text gpg: directory '/home/sxa/.gnupg' created gpg: keybox '/home/sxa/.gnupg/pubring.kbx' created gpg: Signature made Mon Jul 4 18:20:31 2022 UTC @@ -104,7 +104,7 @@ example to use the Ubuntu key servers run this command: If you then run the verify command you will get a message indicating that the newly imported key has not been trusted: -```output +```text gpg: Good signature from "Adoptium GPG Key (DEB/RPM Signing Key) " [unknown] gpg: WARNING: This key is not certified with a trusted signature! gpg: There is no indication that the signature @@ -122,7 +122,7 @@ gpg --edit-key 3B04D753C9050D9A5D343F39843C48A565F8F04B trust The verification should then succeed as follows: -```output +```text gpg: Signature made Mon Jul 4 18:20:31 2022 UTC gpg: using RSA key 3B04D753C9050D9A5D343F39843C48A565F8F04B gpg: checking the trustdb diff --git a/content/blog/jlink-to-produce-own-runtime/index.md b/content/blog/jlink-to-produce-own-runtime/index.md index 00e8e4ed54..1e4736c531 100644 --- a/content/blog/jlink-to-produce-own-runtime/index.md +++ b/content/blog/jlink-to-produce-own-runtime/index.md @@ -62,7 +62,7 @@ the ones which your runtime supports with `java --list-modules`. At the time of writing, using the `jdk-17+35` release, the list of extra modules is as follows: -```output +```text jdk.attach jdk.compiler jdk.editpad diff --git a/content/mdx-docs/installation/linux/index.md b/content/mdx-docs/installation/linux/index.md index 08f1de9c77..9b0238a1b2 100644 --- a/content/mdx-docs/installation/linux/index.md +++ b/content/mdx-docs/installation/linux/index.md @@ -14,14 +14,14 @@ Eclipse Temurin RPM and DEB packages are now available for installing on your fa The following name schema is being used: -```output +```text temurin--jdk e.g temurin-17-jdk or temurin-8-jdk ``` ## Deb installation on Debian or Ubuntu -. Ensure the necessary packages are present: +Ensure the necessary packages are present: ```bash apt install -y wget apt-transport-https diff --git a/gatsby-config.js b/gatsby-config.js index 4996e67fac..977dbe2410 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -140,7 +140,7 @@ module.exports = { } }, 'gatsby-remark-autolink-headers', - 'gatsby-remark-prismjs', + // 'gatsby-remark-prismjs', 'gatsby-remark-copy-linked-files', 'gatsby-remark-smartypants' ] diff --git a/package-lock.json b/package-lock.json index 4ddd7617e9..be24bf976d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,7 +43,6 @@ "gatsby-remark-smartypants": "^6.4.0", "gatsby-source-filesystem": "^5.4.0", "gatsby-transformer-sharp": "^5.4.0", - "highlight.js": "^11.6.0", "html-to-text": "^9.0.3", "i18next": "^22.4.9", "iso-639-1": "^2.1.15", @@ -74,6 +73,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^14.4.3", "@types/gatsbyjs__reach-router": "^1.3.0", + "@types/prismjs": "^1.26.0", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", "@types/react-test-renderer": "^18.0.0", @@ -81,6 +81,7 @@ "@types/testing-library__jest-dom": "^5.14.5", "@vitejs/plugin-react": "^3.0.1", "@vitest/coverage-c8": "^0.27.2", + "babel-plugin-prismjs": "^2.1.0", "babel-preset-gatsby": "^3.4.0", "cross-fetch": "^3.1.5", "gatsby-cli": "^5.4.0", @@ -4744,6 +4745,12 @@ "version": "4.0.0", "license": "MIT" }, + "node_modules/@types/prismjs": { + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==", + "dev": true + }, "node_modules/@types/prop-types": { "version": "15.7.5", "license": "MIT" @@ -5916,6 +5923,15 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-prismjs": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-2.1.0.tgz", + "integrity": "sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g==", + "dev": true, + "peerDependencies": { + "prismjs": "^1.18.0" + } + }, "node_modules/babel-plugin-remove-graphql-queries": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-5.4.0.tgz", @@ -12372,13 +12388,6 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" }, - "node_modules/highlight.js": { - "version": "11.6.0", - "license": "BSD-3-Clause", - "engines": { - "node": ">=12.0.0" - } - }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "license": "BSD-3-Clause", @@ -26619,6 +26628,12 @@ "@types/parse-json": { "version": "4.0.0" }, + "@types/prismjs": { + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==", + "dev": true + }, "@types/prop-types": { "version": "15.7.5" }, @@ -27389,6 +27404,13 @@ "@babel/helper-define-polyfill-provider": "^0.3.3" } }, + "babel-plugin-prismjs": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-2.1.0.tgz", + "integrity": "sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g==", + "dev": true, + "requires": {} + }, "babel-plugin-remove-graphql-queries": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-5.4.0.tgz", @@ -31679,9 +31701,6 @@ } } }, - "highlight.js": { - "version": "11.6.0" - }, "hoist-non-react-statics": { "version": "3.3.2", "requires": { diff --git a/package.json b/package.json index 3f04a06fe2..6d52863a84 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "gatsby-remark-smartypants": "^6.4.0", "gatsby-source-filesystem": "^5.4.0", "gatsby-transformer-sharp": "^5.4.0", - "highlight.js": "^11.6.0", "html-to-text": "^9.0.3", "i18next": "^22.4.9", "iso-639-1": "^2.1.15", @@ -70,6 +69,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^14.4.3", "@types/gatsbyjs__reach-router": "^1.3.0", + "@types/prismjs": "^1.26.0", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", "@types/react-test-renderer": "^18.0.0", @@ -77,6 +77,7 @@ "@types/testing-library__jest-dom": "^5.14.5", "@vitejs/plugin-react": "^3.0.1", "@vitest/coverage-c8": "^0.27.2", + "babel-plugin-prismjs": "^2.1.0", "babel-preset-gatsby": "^3.4.0", "cross-fetch": "^3.1.5", "gatsby-cli": "^5.4.0", diff --git a/src/components/CodeBox/InlineCode.tsx b/src/components/CodeBox/InlineCode.tsx new file mode 100644 index 0000000000..59d17ed214 --- /dev/null +++ b/src/components/CodeBox/InlineCode.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import styles from './index.module.scss'; + +const InlineCode = ({ children }: React.PropsWithChildren): JSX.Element => ( + {children} +); + +export default InlineCode; diff --git a/src/components/CodeBox/__tests__/CodeBox.test.tsx b/src/components/CodeBox/__tests__/CodeBox.test.tsx new file mode 100644 index 0000000000..d0b5fde1ea --- /dev/null +++ b/src/components/CodeBox/__tests__/CodeBox.test.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/react'; +import { vi } from 'vitest'; + +import CodeBox from '../index'; + +Object.assign(navigator, { + clipboard: { + writeText: vi.fn(), + }, +}); + +const navigatorClipboardSpy = vi.spyOn(navigator.clipboard, 'writeText'); + +afterEach(() => { + vi.clearAllMocks(); +}); + +describe('Codebox component', (): void => { + it('renders correctly', (): void => { + const textToCopy =

text to be copy

; + const { container } = render( + + {{ + props: { + className: 'language-html', + children: textToCopy, + }, + }} + + ); + expect(container).toMatchSnapshot(); + }); + + it('renders correctly', async () => { + const textToCopy =

text to be copy

; + + render( + + {{ + props: { + className: 'language-html', + children: textToCopy, + }, + }} + + ); + + navigatorClipboardSpy.mockImplementationOnce(() => Promise.resolve()); + + const buttonElement = screen.getByText('copy'); + userEvent.click(buttonElement); + + await screen.findByText('copied'); + + expect(navigatorClipboardSpy).toHaveBeenCalledTimes(1); + expect(navigatorClipboardSpy).toHaveBeenCalledWith(textToCopy.toString()); + }); +}); \ No newline at end of file diff --git a/src/components/CodeBox/__tests__/InlineCode.test.tsx b/src/components/CodeBox/__tests__/InlineCode.test.tsx new file mode 100644 index 0000000000..c003046112 --- /dev/null +++ b/src/components/CodeBox/__tests__/InlineCode.test.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/react'; + +import InlineCode from '../InlineCode'; + +describe('InlineCode component', (): void => { + it('renders correctly', (): void => { + const { container } = render( + + This is some sample code + + ); + expect(container).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/src/components/CodeBox/__tests__/__snapshots__/CodeBox.test.tsx.snap b/src/components/CodeBox/__tests__/__snapshots__/CodeBox.test.tsx.snap new file mode 100644 index 0000000000..2891540c61 --- /dev/null +++ b/src/components/CodeBox/__tests__/__snapshots__/CodeBox.test.tsx.snap @@ -0,0 +1,27 @@ +// Vitest Snapshot v1 + +exports[`Codebox component > renders correctly 1`] = ` +
+ 
+    

+      
+        HTML
+      
+      
+    

+    

+      [object Object]
+    

+
+
+`; diff --git a/src/components/CodeBox/__tests__/__snapshots__/InlineCode.test.tsx.snap b/src/components/CodeBox/__tests__/__snapshots__/InlineCode.test.tsx.snap new file mode 100644 index 0000000000..acd36e20c4 --- /dev/null +++ b/src/components/CodeBox/__tests__/__snapshots__/InlineCode.test.tsx.snap @@ -0,0 +1,11 @@ +// Vitest Snapshot v1 + +exports[`InlineCode component > renders correctly 1`] = ` +
+ + This is some sample code + +
+`; diff --git a/src/components/CodeBox/index.module.scss b/src/components/CodeBox/index.module.scss new file mode 100644 index 0000000000..57f54d7c4a --- /dev/null +++ b/src/components/CodeBox/index.module.scss @@ -0,0 +1,93 @@ +@import './light.module.scss'; + +%baseStyles { + border-radius: 0.3rem; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + line-height: 1.5; + margin: 0.5em 0 var(--space-24) 0; + overflow: auto; + padding: 0; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + text-align: left; + white-space: pre; + word-break: normal; + word-spacing: normal; + word-wrap: normal; +} + +.code { + @extend %baseStyles; + font-weight: var(--font-weight-light); + padding: 0 6px; + + white-space: break-spaces; +} + +.pre { + @extend %baseStyles; + + padding: 0 !important; + + .top { + display: flex; + flex-direction: row; + justify-content: space-between; + + span, + button { + align-items: center; + display: inherit; + font-size: var(--font-size-code); + height: 23px; + justify-content: center; + width: 86px; + } + + span { + background-color: var(--black4); + border-radius: 0 0 0.3rem 0; + color: var(--black9); + } + + button { + background-color: var(--black9); + border-radius: 0 0 0 0.3rem; + border-width: 0; + color: white; + + i { + padding: 0; + } + } + } + + .content { + margin: 1em; + } +} + +:global(.light) { + .pre { + @include lightStyles; + } + + .code { + background-color: var(--black2); + color: var(--black9); + } + + a .code { + background-color: transparent; + color: var(--color-text-accent); + padding: 0; + } +} diff --git a/src/components/CodeBox/index.tsx b/src/components/CodeBox/index.tsx new file mode 100644 index 0000000000..451f73f2c5 --- /dev/null +++ b/src/components/CodeBox/index.tsx @@ -0,0 +1,68 @@ +import React, { useEffect, useState } from 'react'; +import { highlight, languages } from 'prismjs'; +import classnames from 'classnames'; +import { useCopyToClipboard } from '../../hooks/useCopyToClipboard'; +import styles from './index.module.scss'; + +interface Props { + children: { + props: { + className: string | null; + children: React.ReactNode; + }; + }; +} + +const replaceLabelLanguages = (language: string) => + language + .replace(/powershell/i, 'pwsh') + .toUpperCase(); + + +const CodeBox = ({ children: { props } }: Props): JSX.Element => { + const [parsedCode, setParsedCode] = useState(''); + const [copied, copyText] = useCopyToClipboard(); + + // eslint-disable-next-line react/prop-types + const className = props.className || 'text'; + + // Language Matches in class + const matches = className.match(/language-(?.*)/); + + // Language name from classname + const language = matches?.groups?.lang || 'text'; + + // Actual Code into a stringified format + const stringCode = props.children?.toString() || ''; + + const handleCopyCode = async (event: React.MouseEvent) => { + event.preventDefault(); + copyText(stringCode); + }; + + useEffect(() => { + const prismLanguage = languages[language] || languages.text; + setParsedCode( + highlight(stringCode, prismLanguage, language) + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + 
+      

+        {replaceLabelLanguages(language)}
+        
+      

+      

+
+ ); +}; + +export default CodeBox; \ No newline at end of file diff --git a/src/components/CodeBox/light.module.scss b/src/components/CodeBox/light.module.scss new file mode 100644 index 0000000000..c59493c4fc --- /dev/null +++ b/src/components/CodeBox/light.module.scss @@ -0,0 +1,76 @@ +@mixin lightStyles { + background: var(--black2); + color: black; + + :global .token { + &.comment, + &.prolog, + &.doctype, + &.cdata { + color: slategray; + } + + &.namespace { + opacity: 0.7; + } + + &.property, + &.tag, + &.boolean, + &.number, + &.constant, + &.symbol, + &.deleted { + color: #905; + } + + &.selector, + &.attr-name, + &.char, + &.builtin, + &.inserted { + color: #690; + } + + &.entity, + &.url { + background: hsla(0, 0%, 100%, 0.5); + color: #9a6e3a; + } + + &.atrule, + &.attr-value, + &.keyword { + color: #07a; + } + + &.function, + &.class-name { + color: #dd4a68; + } + + &.regex, + &.important, + &.variable { + color: #e90; + } + + &.important, + &.bold { + font-weight: var(--font-weight-vold); + } + &.italic { + font-style: italic; + } + + &.entity { + cursor: help; + } + + &.punctuation, + &.operator, + &.string { + background-color: var(--black2); + } + } + } \ No newline at end of file diff --git a/src/hooks/__tests__/useCopyToClipboard.test.tsx b/src/hooks/__tests__/useCopyToClipboard.test.tsx new file mode 100644 index 0000000000..c9027d0543 --- /dev/null +++ b/src/hooks/__tests__/useCopyToClipboard.test.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import { render, fireEvent, screen, waitFor } from '@testing-library/react'; +import { useCopyToClipboard } from '../useCopyToClipboard'; +import { vi } from 'vitest'; +import { act } from 'react-test-renderer'; + +describe('useCopyToClipboard', () => { + const HookRenderer = ({ text }: { text: string }): JSX.Element => { + const [copied, copyText] = useCopyToClipboard(); + + return ( + + ); + }; + + it('should have `copy` text when failed', async () => { + const navigatorClipboardWriteTextSpy = vi + .fn() + .mockImplementation(() => Promise.reject()); + + Object.defineProperty(window.navigator, 'clipboard', { + writable: true, + value: { + writeText: navigatorClipboardWriteTextSpy, + }, + }); + + act(() => { + render(); + waitFor(() => { + expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1); + }).then(() => { + const button = screen.getByRole('button'); + fireEvent.click(button); + expect(button).toHaveTextContent('copy'); + }); + }); + + }); + + it('should change to `copied` when copy succeeded', async () => { + vi.useFakeTimers(); + const navigatorClipboardWriteTextSpy = vi + .fn() + .mockImplementation(() => Promise.resolve()); + + Object.defineProperty(window.navigator, 'clipboard', { + writable: true, + value: { + writeText: navigatorClipboardWriteTextSpy, + }, + }); + + render(); + const button = screen.getByRole('button'); + fireEvent.click(button); + await waitFor(() => { + expect(button).toHaveTextContent('copied'); + }); + vi.advanceTimersByTime(3000); + await waitFor(() => { + expect(button).toHaveTextContent('copy'); + }); + }); + + it('should call clipboard API with `test` once', () => { + const navigatorClipboardWriteTextSpy = vi + .fn() + .mockImplementation(() => Promise.resolve()); + + Object.defineProperty(window.navigator, 'clipboard', { + writable: true, + value: { + writeText: navigatorClipboardWriteTextSpy, + }, + }); + + render(); + const button = screen.getByRole('button'); + fireEvent.click(button); + expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1); + expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith('test'); + }); +}); diff --git a/src/hooks/useCopyToClipboard.tsx b/src/hooks/useCopyToClipboard.tsx new file mode 100644 index 0000000000..b1ea59c04f --- /dev/null +++ b/src/hooks/useCopyToClipboard.tsx @@ -0,0 +1,30 @@ +import { useEffect, useState } from 'react'; + +const copyToClipboard = (value: string) => { + if (typeof window === 'undefined') { + return Promise.resolve(false); + } + + return navigator.clipboard + .writeText(value) + .then(() => true) + .catch(() => false); +}; + +export const useCopyToClipboard = (): [boolean, (text: string) => void] => { + const [copied, setCopied] = useState(false); + + const copyText = (text: string) => copyToClipboard(text).then(setCopied); + + useEffect(() => { + if (!copied) { + return undefined; + } + + const timerId = setTimeout(() => setCopied(false), 3000); + + return () => clearTimeout(timerId); + }, [copied]); + + return [copied, copyText]; +}; diff --git a/src/util/__tests__/__snapshots__/mdxComponents.test.tsx.snap b/src/util/__tests__/__snapshots__/mdxComponents.test.tsx.snap index 042da5215f..4296751de2 100644 --- a/src/util/__tests__/__snapshots__/mdxComponents.test.tsx.snap +++ b/src/util/__tests__/__snapshots__/mdxComponents.test.tsx.snap @@ -58,28 +58,6 @@ exports[`mdxComponents > cross renders correctly 1`] = ` `; -exports[`mdxComponents > formatDiv renders correctly - inline code block 1`] = ` -
- - - test - - -
-`; - -exports[`mdxComponents > formatDiv renders correctly 1`] = ` -
-
-

- test -

-
-
-`; - exports[`mdxComponents > small renders correctly 1`] = `

diff --git a/src/util/__tests__/mdxComponents.test.tsx b/src/util/__tests__/mdxComponents.test.tsx index c05f70a33c..df38f3dafa 100644 --- a/src/util/__tests__/mdxComponents.test.tsx +++ b/src/util/__tests__/mdxComponents.test.tsx @@ -3,16 +3,6 @@ import { render } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; describe('mdxComponents', () => { - it('formatDiv renders correctly', () => { - const { container } = render(mdxComponents.div({ dangerouslySetInnerHTML: { __html: '

test

' } })); - expect(container).toMatchSnapshot(); - }); - - it('formatDiv renders correctly - inline code block', () => { - const { container } = render(mdxComponents.div({ dangerouslySetInnerHTML: { __html: 'test' } })); - expect(container).toMatchSnapshot(); - }); - it('small renders correctly', () => { const { container } = render(mdxComponents.Small({ children: 'test' })); expect(container).toMatchSnapshot(); diff --git a/src/util/highlightCode.tsx b/src/util/highlightCode.tsx deleted file mode 100644 index 7fbdaf7bcd..0000000000 --- a/src/util/highlightCode.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import hljs from 'highlight.js/lib/core' -import 'highlight.js/styles/atom-one-dark.css' - -// See the full list of supported languages at https://highlightjs.readthedocs.io/en/latest/supported-languages.html -import java from 'highlight.js/lib/languages/java' -import bash from 'highlight.js/lib/languages/bash' -import powershell from 'highlight.js/lib/languages/powershell' -import json from 'highlight.js/lib/languages/json' -import dos from 'highlight.js/lib/languages/dos' -import yaml from 'highlight.js/lib/languages/yaml' -import xml from 'highlight.js/lib/languages/xml' - -hljs.registerLanguage('java', java) -hljs.registerLanguage('bash', bash) -hljs.registerLanguage('powershell', powershell) -hljs.registerLanguage('dos', dos) -hljs.registerLanguage('json', json) -hljs.registerLanguage('yaml', yaml) -hljs.registerLanguage('html', xml) - -export default function highlightCode () { - const codeBlocks = document.querySelectorAll('pre > code') - codeBlocks.forEach(codeBlock => { - if (typeof codeBlock === 'object') { - hljs.highlightElement(codeBlock) - } - }) -} diff --git a/src/util/mdxComponents.tsx b/src/util/mdxComponents.tsx index 18edb529cb..9f788fefca 100644 --- a/src/util/mdxComponents.tsx +++ b/src/util/mdxComponents.tsx @@ -2,15 +2,8 @@ import React from 'react'; import { FaCheck, FaTimes } from 'react-icons/fa'; import GuestPost from '../components/GuestPost'; - -const formatDiv = props => { - // convert inline code to code blocks - if (props.dangerouslySetInnerHTML.__html.includes('class="language-text"')) { - return - } else { - return
; - } -} +import CodeBox from '../components/CodeBox'; +import InlineCode from '../components/CodeBox/InlineCode'; const Small = props => <>
; @@ -40,9 +33,11 @@ export const mdxComponents = { Collapsible, Class, GuestPost, + code: InlineCode, + InlineCode: InlineCode, + pre: CodeBox, blockquote: props =>
, table: props => , thead: props => , - li: props =>
  • , - div: formatDiv + li: props =>
  • };