Fix lanaguage-less code blocks
Luke Karrys committed
Oct 18, 2023 at 11:49 UTC
e298ac589693f3d1cbe36052f526a335e1ef9acf
5 files changed
+26
-9
package-lock.json
+9
@@ -34,6 +34,7 @@
34
"github-slugger": "^2.0.0",
35
"lodash.debounce": "4.0.8",
36
"prism-react-renderer": "^2.1.0",
37
+ "prismjs": "^1.29.0",
38
"react": "^18.2.0",
39
"react-addons-text-content": "^0.0.4",
40
"react-dom": "^18.2.0",
@@ -27398,6 +27399,14 @@
27399
"react": ">=16.0.0"
27400
}
27401
},
27402
+ "node_modules/prismjs": {
27403
+ "version": "1.29.0",
27404
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
27405
+ "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
27406
+ "engines": {
27407
+ "node": ">=6"
27408
+ }
27409
+ },
27410
"node_modules/proc-log": {
27411
"version": "3.0.0",
27412
"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz",
package.json
+1
@@ -49,6 +49,7 @@
49
"github-slugger": "^2.0.0",
50
"lodash.debounce": "4.0.8",
51
"prism-react-renderer": "^2.1.0",
52
+ "prismjs": "^1.29.0",
53
"react": "^18.2.0",
54
"react-addons-text-content": "^0.0.4",
55
"react-dom": "^18.2.0",
src/components/table-of-contents.js
+1
-1
@@ -35,7 +35,7 @@ const withTableOfContents = Component => {
35
export const Mobile = withTableOfContents(({items}) => {
36
const {getDetailsProps, open} = useDetails({})
37
return (
38
- <Box sx={{display: ['block', null, 'none'], mb: 5}}>
38
+ <Box sx={{display: ['block', null, 'none'], mb: 3}}>
39
<Details {...getDetailsProps()}>
40
<Button variant="invisible" as="summary" leadingIcon={open ? ChevronDownIcon : ChevronRightIcon}>
41
Table of contents
src/components/variant-select.js
+4
-2
@@ -50,7 +50,9 @@ const VariantMenu = ({variants, path}) => {
50
51
return (
52
<>
53
- <p id="label-versions-list-item">Select CLI Version:</p>
53
+ <Box as="p" sx={{m: 0}} id="label-versions-list-item">
54
+ Select CLI Version:
55
+ </Box>
56
<ActionMenu open={open} onOpenChange={setOpen}>
57
{/* Disabling to remove lint warnings. This property was added as "autofocus"
58
in a previous accessibility audit which did not trigger the lint warning. */
@@ -82,7 +84,7 @@ const VariantSelect = () => {
84
}
85
86
return (
85
- <Box sx={{mt: 2}}>
87
+ <Box sx={{mt: 2, mb: 3}}>
88
<VariantMenu variants={variants} path={path} />
89
</Box>
90
)
src/mdx/code.js
+11
-6
@@ -1,10 +1,12 @@
1
import React from 'react'
2
import {Box, Text, Button, Octicon, themeGet} from '@primer/react'
3
-import {Highlight, themes} from 'prism-react-renderer'
3
+import {Highlight, themes, Prism} from 'prism-react-renderer'
4
import styled from 'styled-components'
5
import {CheckIcon, CopyIcon} from '@primer/octicons-react'
6
import copy from 'copy-to-clipboard'
7
import {announce} from '../util/aria-live'
8
+;(typeof global !== 'undefined' ? global : window).Prism = Prism
9
+require('prismjs/components/prism-bash')
10
11
function ClipboardCopy({value, ...props}) {
12
const [copied, setCopied] = React.useState(false)
@@ -42,13 +44,16 @@ export const InlineCode = styled.code`
44
border-radius: ${themeGet('radii.2')};
45
`
46
45
-function Code({className = '', children, ...props}) {
46
- if (!className.startsWith('language-')) {
47
- return <InlineCode {...props}>{children}</InlineCode>
47
+function Code({className = '', children}) {
48
+ const code = children.trim()
49
+ const isBlock = className.startsWith('language-') || code.includes('\n')
50
+
51
+ if (!isBlock) {
52
+ return <InlineCode className={className}>{code}</InlineCode>
53
}
54
55
return (
51
- <Highlight code={children} language={className.replace(/language-/, '')} theme={themes.github}>
56
+ <Highlight code={code} language={className.replace(/language-/, '') || 'bash'} theme={themes.github}>
57
{({className, style, tokens, getLineProps, getTokenProps}) => (
58
<Box
59
sx={{
@@ -73,7 +78,7 @@ function Code({className = '', children, ...props}) {
78
}}
79
>
80
<ClipboardCopy
76
- value={children.toString().trim()}
81
+ value={code}
82
sx={{
83
borderRadius: 0,
84
borderStyle: 'solid',