Skip to content

Commit

Permalink
Merge pull request #25 from 8845musign/fix/sytax-highlite
Browse files Browse the repository at this point in the history
 Fix syntax highlighting not working in production builds
  • Loading branch information
takanorip authored Dec 15, 2023
2 parents 4987d51 + d8df638 commit 7576a74
Show file tree
Hide file tree
Showing 9 changed files with 1,073 additions and 240 deletions.
3 changes: 0 additions & 3 deletions astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@ import rehypeSlug from 'rehype-slug';

// https://astro.build/config
export default defineConfig({
markdown: {
syntaxHighlight: 'prism'
},
integrations: [react(), mdx({
rehypePlugins: [
rehypeSlug,
Expand Down
1,162 changes: 982 additions & 180 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"react-syntax-highlighter": "^15.5.0",
"rehype-autolink-headings": "^7.0.0",
"rehype-slug": "^6.0.0",
"shikiji": "^0.9.2",
"typescript": "^5.2.2",
"uuid": "^9.0.1"
},
Expand Down
6 changes: 6 additions & 0 deletions src/components/astro/Markdown.astro
Original file line number Diff line number Diff line change
Expand Up @@ -89,4 +89,10 @@
color: var(--color-text-sub);
text-decoration: none;
}

/* stylelint-disable-next-line selector-class-pattern */
.markdown :global(.astro-code) {
padding: var(--size-spacing-sm);
border-radius: var(--radius-sm);
}
</style>
71 changes: 33 additions & 38 deletions src/components/react/Example.module.css
Original file line number Diff line number Diff line change
@@ -1,56 +1,51 @@
.example {
position: relative;
width: 100%;
margin-right: auto;
margin-left: auto;
border: 1px solid var(--color-ubie-black-200);
border-radius: 6px;
.demo {
position: relative;
height: 300px;
border: 1px solid var(--color-ubie-black-200);
border-radius: var(--radius-sm);
}

.demoFrame {
width: 100%;
min-height: 100%;
}

.externalLink {
position: absolute;
top: 4px;
right: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: var(--size-spacing-xxs) var(--size-spacing-xs) calc(var(--size-spacing-xxs) - 0.125rem);
font-weight: bold;
color: var(--color-primary);
background-color: rgb(255 255 255 / 75%);
border: none;
position: absolute;
top: 4px;
right: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: var(--size-spacing-xxs) var(--size-spacing-xs) calc(var(--size-spacing-xxs) - 0.125rem);
font-weight: bold;
color: var(--color-primary);
background-color: rgb(255 255 255 / 75%);
border: none;
}

.externalLink:active {
background-color: var(--color-ubie-black-200);
background-color: var(--color-ubie-black-200);
}

@media (hover:hover) {
.externalLink:hover {
background-color: var(--color-ubie-black-100);
}
@media (hover: hover) {
.externalLink:hover {
background-color: var(--color-ubie-black-100);
}
}

.code {
position: relative;
position: relative;
margin-top: var(--size-spacing-sm);
}

.codePrism {
margin: 0 !important;
margin: 0 !important;
}

.copy {
position: absolute;
top: 4px;
right: 4px;
position: absolute;
top: 4px;
right: 4px;
}

.demo {
height: 300px
}

.demoFrame {
width: 100%;
min-height: 100%;
}
24 changes: 7 additions & 17 deletions src/components/react/Example.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import CopyButton from './CopyButton';
import styles from './Example.module.css';
import SyntaxHighlighter from './SyntaxHighlighter';
import type { Example } from '@utils/server';
import type { FC } from 'react';

Expand All @@ -11,12 +10,12 @@ interface Props {

const Example: FC<Props> = ({ example }) => {
return (
<div className={styles.example}>
<a className={styles.externalLink} href={example.url} target="_blank" rel="noreferrer">
Open Window
</a>

<div>
<div className={styles.demo}>
<a className={styles.externalLink} href={example.url} target="_blank" rel="noreferrer">
Open Window
</a>

<iframe
className={styles.demoFrame}
src={example.url}
Expand All @@ -26,16 +25,7 @@ const Example: FC<Props> = ({ example }) => {
</div>

<div className={styles.code}>
<SyntaxHighlighter
language="jsx"
style={a11yDark}
customStyle={{
borderRadius: '0',
margin: '0',
}}
>
{example.code}
</SyntaxHighlighter>
<SyntaxHighlighter lang="jsx">{example.code}</SyntaxHighlighter>
<CopyButton className={styles.copy} text={example.code} />
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions src/components/react/SyntaxHighlighter.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.wrapper :global(> .shiki) {
padding: var(--size-spacing-sm);
margin: 0;
border-radius: var(--radius-sm);
}
37 changes: 37 additions & 0 deletions src/components/react/SyntaxHighlighter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { useEffect, useState } from 'react';
import { getHighlighter } from 'shikiji';
import styles from './SyntaxHighlighter.module.css';
import type { FC } from 'react';

interface Props {
children: string;
lang: Lang;
}

const langs = ['javascript', 'typescript', 'html', 'css', 'jsx'];
type Lang = (typeof langs)[number];

const SyntaxHighligter: FC<Props> = ({ children, lang }) => {
const [code, setCode] = useState('');

useEffect(() => {
const convert = async () => {
const highlighter = await getHighlighter({
langs,
themes: ['github-dark'],
});

const code = highlighter.codeToHtml(children, {
lang: 'javascript',
theme: 'github-dark',
});
setCode(code);
};

convert();
}, [children, lang]);

return <div className={styles.wrapper} dangerouslySetInnerHTML={{ __html: code }} />;
};

export default SyntaxHighligter;
4 changes: 2 additions & 2 deletions src/pages/tokens/index.astro
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
import BaseLayout from '@layouts/BaseLayout.astro';
import LinkWithArrow from '@components/astro/LinkWithArrow.astro';
import Stack from '@components/astro/Stack.astro';
import BaseLayout from '@layouts/BaseLayout.astro';
import type { PostData } from '@types';
import LinkWithArrow from '@components/astro/LinkWithArrow.astro';
const allComponentMdx = await Astro.glob('../tokens/**/*.mdx');
Expand Down

0 comments on commit 7576a74

Please sign in to comment.