Skip to content

Commit 67bb1f7

Browse files
ryanatknryanatkn
committed
fix inline prop behavior
1 parent 5351ef4 commit 67bb1f7

File tree

5 files changed

+119
-115
lines changed

5 files changed

+119
-115
lines changed

‎.changeset/wild-years-help.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@ryanatkn/fuz_code': patch
3+
---
4+
5+
fix `inline` prop behavior

‎src/app.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
%sveltekit.head%
88
</head>
99
<body data-sveltekit-preload-data="hover">
10+
<noscript>This website temporarily requires JS until some bugs get fixed.</noscript>
1011
<div style="display: contents">%sveltekit.body%</div>
1112
</body>
1213
</html>

‎src/lib/Code.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,8 @@
5757
/* the default `code` padding displays incorrectly wrapping the highlighted code */
5858
padding: 0;
5959
}
60+
.inline {
61+
display: inline-block;
62+
vertical-align: bottom;
63+
}
6064
</style>

‎src/routes/Code_Tome.svelte‎

Lines changed: 103 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -11,133 +11,129 @@
1111
</script>
1212

1313
<!-- <LibraryItem name={LIBRARY_ITEM_NAME}> -->
14-
<div class="prose">
15-
<section>
16-
<p>
17-
The
18-
<Tome_Link name="Code" />
19-
component supports syntax highlighting with
20-
<a href="https://prismjs.com/">Prism</a> (<a href="https://github.com/PrismJS/prism">repo</a
21-
>).
22-
</p>
23-
<p>It depends on two packages that you must install yourself:</p>
24-
<Code content="npm i -D prismjs prism-svelte" lang={null} />
25-
<p>Then import the styles:</p>
26-
<Code
27-
lang="js"
28-
content="// +layout.svelte
14+
<section>
15+
<p>
16+
The
17+
<Tome_Link name="Code" />
18+
component supports syntax highlighting with
19+
<a href="https://prismjs.com/">Prism</a> (<a href="https://github.com/PrismJS/prism">repo</a>).
20+
</p>
21+
<p>It depends on two packages that you must install yourself:</p>
22+
<Code content="npm i -D prismjs prism-svelte" lang={null} />
23+
<p>Then import the styles:</p>
24+
<Code
25+
lang="js"
26+
content="// +layout.svelte
2927
import '@ryanatkn/moss/style.css';
3028
import '@ryanatkn/moss/theme.css'; // or your own
3129
// add this:
3230
import '@ryanatkn/fuz_code/prism.css'; // add this"
33-
/>
34-
<p>then use <Tome_Link name="Code" />:</p>
31+
/>
32+
<p>then use <Tome_Link name="Code" />:</p>
33+
<Code
34+
content={'<!-- Something.svelte -->\n<' +
35+
`script>\n\timport Code from '@ryanatkn/fuz_code/Code.svelte';\n</script>\n\n<Code content="<header>hello world</header>" />`}
36+
/>
37+
<p>outputs:</p>
38+
<Code content="<header>hello world</header>" />
39+
</section>
40+
<section>
41+
<aside>
42+
⚠️ Performing syntax highlighting at runtime like this is wasteful. The API's efficiency is
43+
work-in-progress - you can use <code>lang={'{'}null}</code> with pre-highligted text but the
44+
component will still import <code>prismjs</code> and <code>prism-svelte</code>.
45+
</aside>
46+
</section>
47+
<section>
48+
<p>
49+
<Tome_Link name="Code" /> highlights
50+
<a href="https://svelte.dev/">Svelte</a>
51+
by default:
52+
</p>
53+
<div class="mb_lg">
54+
<Code content={'<Code content="<scr..." />'} />
55+
</div>
56+
<p>highlighted:</p>
57+
<div>
3558
<Code
36-
content={'<!-- Something.svelte -->\n<' +
37-
`script>\n\timport Code from '@ryanatkn/fuz_code/Code.svelte';\n</script>\n\n<Code content="<header>hello world</header>" />`}
38-
/>
39-
<p>outputs:</p>
40-
<Code content="<header>hello world</header>" />
41-
</section>
42-
<section>
43-
<aside>
44-
⚠️ Performing syntax highlighting at runtime like this is wasteful. The API's efficiency is
45-
work-in-progress - you can use <code>lang={'{'}null}</code> with pre-highligted text but the
46-
component will still import <code>prismjs</code> and <code>prism-svelte</code>.
47-
</aside>
48-
</section>
49-
<section>
50-
<p>
51-
<Tome_Link name="Code" /> highlights
52-
<a href="https://svelte.dev/">Svelte</a>
53-
by default:
54-
</p>
55-
<div class="mb_lg">
56-
<Code content={'<Code content="<scr..." />'} />
57-
</div>
58-
<p>highlighted:</p>
59-
<div>
60-
<Code
61-
content={'<' +
62-
`script>
59+
content={'<' +
60+
`script>
6361
import Card from '@fuz.dev/fuz-library/Card.svelte';
6462
console.log('hello Card', Card);
6563
</script>
6664
6765
<Card>
6866
<div class="greeting">hi {friend}</div>
6967
</Card>`}
70-
/>
71-
</div>
72-
</section>
73-
<section>
74-
<p>
75-
<Tome_Link name="Code" /> supports TypeScript with <code>lang="ts"</code>:
76-
</p>
77-
<div class="mb_lg">
78-
<Code content={`<Code lang="ts" content="export type A<T> = ('b' | 3) & T;" />`} />
79-
</div>
80-
<div>
81-
<Code lang="ts" content={`export type A<T> = ('b' | 3) & T;`} />
82-
</div>
83-
</section>
84-
<section>
85-
<p>
86-
Passing <code>lang={'{'}null}</code> disables syntax highlighting:
87-
</p>
88-
<Code lang={null} content={`<aside>all is gray</aside>`} />
89-
<div class="mb_lg">
90-
<Code content={'<Code lang={null} content="..." />'} />
91-
</div>
92-
</section>
93-
<section>
94-
<p>
95-
<Tome_Link name="Code" /> is a block by default:
96-
</p>
97-
<p>ab<Code content="c" /></p>
98-
<Code content={'<p>ab<Code content="c" /></p>'} />
99-
</section>
100-
<section>
101-
<p>
102-
<Tome_Link name="Code" /> can be inlined with <Code
103-
inline
104-
content={`<Code inline content="..." />`}
105-
/>
106-
</p>
107-
</section>
108-
<section>
109-
<p>
110-
The <code
111-
><a
112-
href="https://github.com/ryanatkn/fuz_code/blob/main/src/lib/remove_prism_css_vite_plugin.ts"
113-
>remove_prism_css</a
114-
></code
115-
>
116-
Vite plugin is an optimization that excludes the builtin Prism theme, letting you use a minimal
117-
theme that doesn't need selectors for overrides like
118-
<code
119-
><a href="https://github.com/ryanatkn/fuz_code/blob/main/src/lib/prism.css"
120-
>@ryanatkn/fuz_code/prism.css</a
121-
></code
122-
>, while also avoiding waste:
123-
</p>
124-
<div>
125-
<Code
126-
lang="ts"
127-
content={`import type {UserConfig} from 'vite';
68+
/>
69+
</div>
70+
</section>
71+
<section>
72+
<p>
73+
<Tome_Link name="Code" /> supports TypeScript with <code>lang="ts"</code>:
74+
</p>
75+
<div class="mb_lg">
76+
<Code content={`<Code lang="ts" content="export type A<T> = ('b' | 3) & T;" />`} />
77+
</div>
78+
<div>
79+
<Code lang="ts" content={`export type A<T> = ('b' | 3) & T;`} />
80+
</div>
81+
</section>
82+
<section>
83+
<p>
84+
Passing <code>lang={'{'}null}</code> disables syntax highlighting:
85+
</p>
86+
<Code lang={null} content={`<aside>all is gray</aside>`} />
87+
<div class="mb_lg">
88+
<Code content={'<Code lang={null} content="..." />'} />
89+
</div>
90+
</section>
91+
<section>
92+
<p>
93+
<Tome_Link name="Code" /> is a block by default:
94+
</p>
95+
<p>ab<Code content="c" /></p>
96+
<Code content={'<p>ab<Code content="c" /></p>'} />
97+
</section>
98+
<section>
99+
<p>
100+
<Tome_Link name="Code" /> can be inlined with <Code
101+
inline
102+
content={`<Code inline content="..." />`}
103+
/>
104+
</p>
105+
</section>
106+
<section>
107+
<p>
108+
The <code
109+
><a
110+
href="https://github.com/ryanatkn/fuz_code/blob/main/src/lib/remove_prism_css_vite_plugin.ts"
111+
>remove_prism_css</a
112+
></code
113+
>
114+
Vite plugin is an optimization that excludes the builtin Prism theme, letting you use a minimal theme
115+
that doesn't need selectors for overrides like
116+
<code
117+
><a href="https://github.com/ryanatkn/fuz_code/blob/main/src/lib/prism.css"
118+
>@ryanatkn/fuz_code/prism.css</a
119+
></code
120+
>, while also avoiding waste:
121+
</p>
122+
<div>
123+
<Code
124+
lang="ts"
125+
content={`import type {UserConfig} from 'vite';
128126
import {sveltekit} from '@sveltejs/kit/vite';
129127
import {remove_prism_css} from '@ryanatkn/fuz_code/remove_prism_css_vite_plugin.js';
130128
131129
const config: UserConfig = {
132130
plugins: [sveltekit(), remove_prism_css()],
133-
ssr: {noExternal: ['@fuz.dev/fuz']},
134131
};
135132
136133
export default config;`}
137-
/>
138-
</div>
139-
</section>
140-
</div>
134+
/>
135+
</div>
136+
</section>
141137

142138
<!-- </LibraryItem> -->
143139

‎src/routes/about/+page.svelte‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,12 @@
1212
</script>
1313

1414
<main class="width_md">
15-
<div class="prose">
16-
<section>
17-
<header>
18-
<h1>{pkg.repo_name}</h1>
19-
</header>
20-
<Breadcrumb>🧶</Breadcrumb>
21-
</section>
22-
</div>
15+
<section>
16+
<header>
17+
<h1>{pkg.repo_name}</h1>
18+
</header>
19+
<Breadcrumb>🧶</Breadcrumb>
20+
</section>
2321
<section class="box w_100 mb_lg">
2422
<div class="panel p_md width_md">
2523
<Package_Detail {pkg} />

0 commit comments

Comments
 (0)