Skip to content

Commit d0d024e

Browse files
committed
docs(highlight-auto): support subset of languages
1 parent 02580e7 commit d0d024e

File tree

2 files changed

+54
-4
lines changed

2 files changed

+54
-4
lines changed

README.md

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,25 @@ The `HighlightAuto` component uses the [highlightAuto API](https://highlightjs.r
164164
<HighlightAuto {code} />
165165
```
166166

167+
### Limiting Language Detection
168+
169+
You can restrict [language auto-detection](https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset) to a subset using the `languageNames` prop. This can improve performance and accuracy.
170+
171+
```svelte
172+
<script>
173+
import { HighlightAuto } from "svelte-highlight";
174+
import github from "svelte-highlight/styles/github";
175+
176+
const code = "const x = 42;";
177+
</script>
178+
179+
<svelte:head>
180+
{@html github}
181+
</svelte:head>
182+
183+
<HighlightAuto {code} languages={["javascript", "typescript"]} />
184+
```
185+
167186
## Line Numbers
168187

169188
Use the `LineNumbers` component to render the highlighted code with line numbers.
@@ -489,13 +508,20 @@ In the example below, the `HighlightAuto` component and injected styles are dyna
489508

490509
#### Props
491510

492-
| Name | Type | Default value |
493-
| :------ | :-------- | :------------- |
494-
| code | `any` | N/A (required) |
495-
| langtag | `boolean` | `false` |
511+
| Name | Type | Default value |
512+
| :-------- | :--------------- | :------------- |
513+
| code | `any` | N/A (required) |
514+
| languages | `LanguageName[]` | `undefined` |
515+
| langtag | `boolean` | `false` |
496516

497517
`$$restProps` are forwarded to the top-level `pre` element.
498518

519+
**Note:** `LanguageName` is a union type of all supported language names, providing autocomplete and type safety. You can import it from `svelte-highlight`:
520+
521+
```ts
522+
import type { LanguageName } from "svelte-highlight";
523+
```
524+
499525
#### Dispatched Events
500526

501527
- **on:highlight**: fired after `code` is highlighted

www/components/globals/Index.svelte

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,30 @@
157157
subtitle="Auto-highlighting will result in a larger bundle size. Specify a language if possible."
158158
/>
159159
</Column>
160+
<Column xlg={6} lg={6} md={12}>
161+
<p class="mb-5">
162+
Optionally, you can restrict language detection to a specific subset using
163+
the <code class="code">languageNames</code> prop. This can improve performance
164+
and accuracy.
165+
</p>
166+
</Column>
167+
<Column xlg={10} lg={10} md={12}>
168+
<HighlightSvelte
169+
code={`<script>
170+
import { HighlightAuto } from "svelte-highlight";
171+
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
172+
173+
const code = "const x = 42;";
174+
<\/script>
175+
176+
<svelte:head>
177+
{@html atomOneDark}
178+
</svelte:head>
179+
180+
<HighlightAuto {code} languageNames={["javascript", "typescript"]} />`}
181+
class={THEME_MODULE_NAME}
182+
/>
183+
</Column>
160184
</Row>
161185

162186
<Row class="mb-9">

0 commit comments

Comments
 (0)