Skip to content

Commit 88bc385

Browse files
bradlcbradlc
committed
update code blocks
1 parent 74d2616 commit 88bc385

File tree

6 files changed

+82
-97
lines changed

6 files changed

+82
-97
lines changed

‎remark/withCodeSamples.js

+5
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,18 @@ module.exports = () => {
2828
if (!snippet) snippet = previewCode
2929

3030
snippet = Prism.highlight(redent(snippet).trim(), Prism.languages.html, 'html')
31+
snippet = snippet.replace(
32+
/\[([^\]]+)\]/g,
33+
(_, text) => `<span class="code-highlight bg-code-highlight">${text}</span>`
34+
)
3135

3236
node.type = 'jsx'
3337
node.value = `
3438
<${component}
3539
preview={${JSON.stringify(previewCode)}}
3640
snippet={${JSON.stringify(snippet)}}
3741
previewClassName={${JSON.stringify(previewClassName)}}
42+
color={${JSON.stringify(node.meta ? node.meta : undefined)}}
3843
/>
3944
`.trim()
4045

‎remark/withSyntaxHighlighting.js

+12-2
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,30 @@ const loadLanguages = require('prismjs/components/')
44
loadLanguages()
55
require('./prism-diff-highlight')(Prism)
66

7+
const colors = {
8+
rose: 'bg-rose-400',
9+
}
10+
711
module.exports.withSyntaxHighlighting = () => {
812
return (tree) => {
913
visit(tree, 'code', (node) => {
1014
if (node.lang !== null) {
1115
node.type = 'html'
1216
node.value = [
13-
`<pre class="language-${node.lang} ${node.meta || ''}">`,
17+
`<div class="my-6 rounded-xl overflow-hidden ${colors[node.meta] || 'bg-gray-800'}">`,
18+
`<pre class="language-${node.lang} ${
19+
colors[node.meta] ? 'bg-black bg-opacity-75' : ''
20+
}">`,
1421
`<code class="language-${node.lang}">`,
1522
Prism.languages[node.lang]
1623
? Prism.highlight(node.value, Prism.languages[node.lang], node.lang)
1724
: node.value,
1825
'</code>',
1926
'</pre>',
20-
].join('')
27+
'</div>',
28+
]
29+
.filter(Boolean)
30+
.join('')
2131
}
2232
})
2333
}

‎src/components/CodeSample.js

+30-9
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,45 @@
11
import clsx from 'clsx'
22

3-
export function CodeSample({ preview, snippet, previewClassName }) {
3+
const codeBackground = {
4+
rose: 'bg-rose-400',
5+
emerald: 'bg-emerald-500',
6+
indigo: 'bg-indigo-400',
7+
fuchsia: 'bg-fuchsia-400',
8+
}
9+
10+
const previewBackground = {
11+
gray: 'bg-gradient-to-r from-gray-50 to-gray-100',
12+
rose: 'bg-gradient-to-r from-rose-50 to-rose-100',
13+
emerald: 'bg-gradient-to-r from-emerald-50 to-teal-100',
14+
indigo: 'bg-gradient-to-r from-indigo-50 to-indigo-100',
15+
fuchsia: 'bg-gradient-to-r from-fuchsia-50 to-fuchsia-100',
16+
}
17+
18+
export function CodeSample({ preview, snippet, previewClassName, color = 'gray' }) {
419
return (
520
<div className="relative overflow-hidden mb-8">
621
<div
722
className={clsx(
8-
'rounded-t-lg overflow-hidden border-t border-l border-r border-gray-400',
23+
'rounded-t-xl overflow-hidden',
24+
previewBackground[color],
925
previewClassName,
1026
{
11-
'p-4': !previewClassName,
27+
'p-10': !previewClassName,
1228
}
1329
)}
1430
dangerouslySetInnerHTML={{ __html: preview }}
1531
/>
16-
<div className="rounded-b-lg bg-gray-800">
17-
<pre className="scrollbar-none m-0 p-0 language-html">
18-
<code
19-
className="inline-block p-4 scrolling-touch language-html"
20-
dangerouslySetInnerHTML={{ __html: snippet }}
21-
/>
32+
<div
33+
className={clsx('overflow-hidden rounded-b-xl', codeBackground[color], {
34+
'bg-gray-800': !codeBackground[color],
35+
})}
36+
>
37+
<pre
38+
className={clsx('scrollbar-none p-6 text-sm leading-snug language-html', {
39+
'bg-black bg-opacity-75': codeBackground[color],
40+
})}
41+
>
42+
<code className="language-html" dangerouslySetInnerHTML={{ __html: snippet }} />
2243
</pre>
2344
</div>
2445
</div>

‎src/components/ConfigSample.js

+31-29
Original file line numberDiff line numberDiff line change
@@ -46,34 +46,36 @@ export function ConfigSample({ path, add, remove, before, after }) {
4646
path = typeof path === 'string' ? path.split('.') : path
4747

4848
return (
49-
<pre className="language-diff">
50-
<code className="language-diff">
51-
<span className="token unchanged">
52-
{' // tailwind.config.js\n'}
53-
{' module.exports = {\n'}
54-
{path.map((key, i) => (
55-
<Fragment key={i}>
56-
{' '}
57-
{' '.repeat(i + 1)}
58-
{key}: {'{\n'}
59-
</Fragment>
60-
))}
61-
{before && castArray(before).map((str) => `${' '.repeat(path.length + 2)}${str}\n`)}
62-
</span>
63-
{remove && <Edits edits={remove} type="deleted" indent={' '.repeat(path.length + 1)} />}
64-
{add && <Edits edits={add} type="inserted" indent={' '.repeat(path.length + 1)} />}
65-
<span className="token unchanged">
66-
{after && castArray(after).map((str) => `${' '.repeat(path.length + 2)}${str}\n`)}
67-
{path.map((key, i) => (
68-
<Fragment key={i}>
69-
{' '}
70-
{' '.repeat(path.length - i)}
71-
{'}\n'}
72-
</Fragment>
73-
))}
74-
{' }'}
75-
</span>
76-
</code>
77-
</pre>
49+
<div className="my-6 rounded-xl overflow-hidden bg-gray-800">
50+
<pre className="language-diff">
51+
<code className="language-diff">
52+
<span className="token unchanged">
53+
{' // tailwind.config.js\n'}
54+
{' module.exports = {\n'}
55+
{path.map((key, i) => (
56+
<Fragment key={i}>
57+
{' '}
58+
{' '.repeat(i + 1)}
59+
{key}: {'{\n'}
60+
</Fragment>
61+
))}
62+
{before && castArray(before).map((str) => `${' '.repeat(path.length + 2)}${str}\n`)}
63+
</span>
64+
{remove && <Edits edits={remove} type="deleted" indent={' '.repeat(path.length + 1)} />}
65+
{add && <Edits edits={add} type="inserted" indent={' '.repeat(path.length + 1)} />}
66+
<span className="token unchanged">
67+
{after && castArray(after).map((str) => `${' '.repeat(path.length + 2)}${str}\n`)}
68+
{path.map((key, i) => (
69+
<Fragment key={i}>
70+
{' '}
71+
{' '.repeat(path.length - i)}
72+
{'}\n'}
73+
</Fragment>
74+
))}
75+
{' }'}
76+
</span>
77+
</code>
78+
</pre>
79+
</div>
7880
)
7981
}

‎src/css/prism-atom-dark.css

-55
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,3 @@
1-
/**
2-
* atom-dark theme for `prism.js`
3-
* Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
4-
* @author Joe Gibson (@gibsjose)
5-
*/
6-
7-
code[class*='language-'],
8-
pre[class*='language-'] {
9-
@apply font-mono text-gray-200;
10-
/* color: #c5c8c6; */
11-
/* text-shadow: 0 1px rgba(0, 0, 0, 0.3); */
12-
/* font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;*/
13-
direction: ltr;
14-
text-align: left;
15-
white-space: pre;
16-
word-spacing: normal;
17-
word-break: normal;
18-
line-height: 1.5;
19-
20-
-moz-tab-size: 4;
21-
-o-tab-size: 4;
22-
tab-size: 4;
23-
24-
-webkit-hyphens: none;
25-
-moz-hyphens: none;
26-
-ms-hyphens: none;
27-
hyphens: none;
28-
}
29-
30-
/* Code blocks */
31-
pre[class*='language-'] {
32-
@apply p-4;
33-
/* padding: 1em; */
34-
/* margin: .5em 0; */
35-
overflow: auto;
36-
border-radius: 0.3em;
37-
}
38-
39-
:not(pre) > code[class*='language-'],
40-
pre[class*='language-'] {
41-
background: #1d1f21;
42-
}
43-
44-
/* Inline code */
45-
:not(pre) > code[class*='language-'] {
46-
padding: 0.1em;
47-
border-radius: 0.3em;
48-
}
49-
501
.token.comment,
512
.token.prolog,
523
.token.doctype,
@@ -148,12 +99,6 @@ pre[class*='language-'] {
14899
cursor: help;
149100
}
150101

151-
:not(pre) > code[class*='language-'],
152-
pre[class*='language-'] {
153-
background: transparent;
154-
@apply text-sm;
155-
}
156-
157102
/* Custom overrides */
158103
/* .token.atrule, .token.atrule .token.number {
159104
color: #fff;

‎tailwind.config.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,10 @@ module.exports = {
9191
content: 'none',
9292
},
9393
pre: {
94-
backgroundColor: theme('colors.gray.800'),
95-
borderRadius: theme('borderRadius.xl'),
94+
backgroundColor: '-',
95+
borderRadius: 0,
96+
marginTop: 0,
97+
marginBottom: 0,
9698
},
9799
},
98100
},

0 commit comments

Comments
 (0)