Skip to content

Commit b897744

Browse files
shaireznaorpeledwmertens
committed
docs: add code examples highlighter
Co-authored-by: Naor Peled <[email protected]> Co-authored-by: Wout Mertens <[email protected]>
1 parent 85c85e7 commit b897744

File tree

6 files changed

+91
-146
lines changed

6 files changed

+91
-146
lines changed

‎apps/website/src/routes/docs/_components/code-example/code-example.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { component$, Slot } from '@builder.io/qwik';
22

33
export const CodeExample = component$(() => {
44
return (
5-
<div class="p-12 mb-6 rounded-xl bg-slate-900">
5+
<div class="mb-6 rounded-xl p-12 ">
66
<section class="overflow-x-auto">
77
<Slot />
88
</section>

‎apps/website/src/routes/docs/_components/preview-code-example/preview-code-example.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ export const PreviewCodeExample = component$(() => {
1313
return (
1414
<Tabs class="mb-12" selectedClassName="previewCodeExampleSelectedTab">
1515
<TabList class="flex rounded-t-xl bg-blue-200 dark:bg-indigo-900">
16-
<Tab class="px-4 py-2 rounded-tl-xl hover:bg-[#6daeff] dark:hover:bg-[#423dff]">
16+
<Tab class="rounded-tl-xl px-4 py-2 hover:bg-[#6daeff] dark:hover:bg-[#423dff]">
1717
Preview
1818
</Tab>
1919
<Tab class="px-4 py-2 hover:bg-[#6daeff] dark:hover:bg-[#423dff]">Code</Tab>
2020
</TabList>
21-
<TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-200 dark:bg-slate-900">
21+
<TabPanel class="rounded-b-xl bg-slate-200 p-4 dark:bg-slate-900 md:p-12">
2222
<section class="flex flex-col items-center">
2323
<Slot name="actualComponent" />
2424
</section>
2525
</TabPanel>
26-
<TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-900">
26+
<TabPanel class="rounded-b-xl p-4 md:p-12 ">
2727
<section class="overflow-auto">
2828
<Slot name="codeExample" />
2929
</section>

‎apps/website/src/routes/docs/headless/(components)/tabs/example.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { FunctionComponent, component$ } from '@builder.io/qwik';
2+
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
3+
4+
export const InlineExample: FunctionComponent = (props) => {
5+
props.children; // pre
6+
return <></>;
7+
};
8+
9+
export const Example01 = component$(() => {
10+
return (
11+
<>
12+
<h3>Danish Composers</h3>
13+
<Tabs behavior="automatic">
14+
<TabList>
15+
<Tab>Maria Ahlefeldt</Tab>
16+
<Tab>Carl Andersen</Tab>
17+
<Tab>Ida Henriette da Fonseca</Tab>
18+
</TabList>
19+
<TabPanel>
20+
<p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a ...</p>
21+
</TabPanel>
22+
<TabPanel>
23+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
24+
</TabPanel>
25+
<TabPanel>
26+
<p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...</p>
27+
</TabPanel>
28+
</Tabs>
29+
</>
30+
);
31+
});

‎apps/website/src/routes/docs/headless/(components)/tabs/examples.tsx

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,57 @@
1-
import { component$, Slot, useSignal, useStore, useStyles$ } from '@builder.io/qwik';
1+
import {
2+
component$,
3+
QwikIntrinsicElements,
4+
Slot,
5+
useSignal,
6+
useStore,
7+
useStyles$,
8+
} from '@builder.io/qwik';
29
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
10+
import type { OmitSignalClass } from '../../../../../../../../../shared/src/utils';
311
import { PreviewCodeExample } from '../../../_components/preview-code-example/preview-code-example';
12+
import { Example01 as Example1 } from './example';
13+
import example1Code from './example?raw';
414
import styles from './index.css?inline';
515

16+
import hljs from 'highlight.js/lib/core';
17+
import css from 'highlight.js/lib/languages/css';
18+
import javascript from 'highlight.js/lib/languages/javascript';
19+
import typescript from 'highlight.js/lib/languages/typescript';
20+
import xml from 'highlight.js/lib/languages/xml';
21+
import 'highlight.js/styles/atom-one-dark.css';
22+
hljs.registerLanguage('javascript', javascript);
23+
hljs.registerLanguage('typescript', typescript);
24+
hljs.registerLanguage('xml', xml);
25+
hljs.registerLanguage('css', css);
26+
27+
export const Highlight = ({
28+
code,
29+
...props
30+
}: OmitSignalClass<QwikIntrinsicElements['pre']> & { code: string }) => (
31+
<pre
32+
{...props}
33+
class={[
34+
'theme-atom-one-dark shadow-3xl tab-size relative h-full max-w-full overflow-hidden text-sm',
35+
props.class,
36+
]}
37+
>
38+
<code
39+
dangerouslySetInnerHTML={hljs.highlight(code, { language: 'typescript' }).value}
40+
/>
41+
</pre>
42+
);
43+
644
export const Example01 = component$(() => {
45+
console.log('example1Code', example1Code);
746
useStyles$(styles);
847

948
return (
1049
<PreviewCodeExample>
1150
<div q:slot="actualComponent" class="tabs-example">
12-
<h3>Danish Composers</h3>
13-
<Tabs behavior="automatic">
14-
<TabList>
15-
<Tab>Maria Ahlefeldt</Tab>
16-
<Tab>Carl Andersen</Tab>
17-
<Tab>Ida Henriette da Fonseca</Tab>
18-
</TabList>
19-
<TabPanel>
20-
<p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a ...</p>
21-
</TabPanel>
22-
<TabPanel>
23-
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
24-
</TabPanel>
25-
<TabPanel>
26-
<p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...</p>
27-
</TabPanel>
28-
</Tabs>
51+
<Example1 />
2952
</div>
3053

31-
<div q:slot="codeExample">
32-
<Slot />
33-
</div>
54+
<Highlight q:slot="codeExample" code={example1Code} />
3455
</PreviewCodeExample>
3556
);
3657
});
@@ -42,7 +63,7 @@ export const VerticalTabsExample = component$(() => {
4263
<h3>Danish Composers</h3>
4364

4465
<Tabs vertical class="flex flex-wrap gap-5">
45-
<TabList class="flex flex-col w-fit">
66+
<TabList class="flex w-fit flex-col">
4667
<Tab>Maria Ahlefeldt</Tab>
4768
<Tab>Carl Andersen</Tab>
4869
<Tab>Ida Henriette da Fonseca</Tab>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"eslint-plugin-cypress": "^2.14.0",
7777
"eslint-plugin-qwik": "^1.2.10",
7878
"eslint-plugin-storybook": "^0.6.13",
79+
"highlight.js": "11.8.0",
7980
"husky": "^8.0.3",
8081
"jsdom": "22.1.0",
8182
"libphonenumber-js": "^1.10.43",

‎pnpm-lock.yaml

Lines changed: 12 additions & 120 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)