{@html hiddenCode}{@html line}92 | For the installation, simply install the package, as well as 93 | highlight.js 94 | and 95 | TailwindCSS (link to instructions 96 | on how to install Tailwind), with npm or pnpm. 97 |
98 | 99 |
108 | Once you have Tailwind installed you need to update the tailwind.config.cjs
109 | file, to make sure that Tailwind knows to also compile files from this package. Simply add the
110 | following line to the
111 | content:
112 |
130 | To highlight lines you can define a string with the line numbers that should be highlighted
131 | with the highlightLines prop. You can separate multiple lines with commas and
132 | add ranges. The highlight color can be changed with highlightColor.
133 |
136 | The highlight.js repo has a full list of supported languages, as well as a 140 | list of available themes. 143 |
144 | 145 |
159 | You can switch the focus type between 'highlight' and 'blur' using
160 | the focusType prop. By default blur is used.
161 |
169 | You can define a list of focus blocks, in which you can define lines that should be
170 | highlighted, as well as which line to scroll to when the focus block is active. If you are
171 | using Typescript, you can import the FocusBlock type from the library. If you
172 | want to see focus buttons for each focus block, you can set
173 | showFocusButtons={'{true}'}. Setting lines: '' will not highlight
174 | any lines, so it can also be used as an "unblur" button. To specify the text in a button you
175 | can set the text property.
176 |
178 | Focus buttons can be customized with the
179 | focusButtonClasses prop.
180 |
200 | You can either style the focus buttons to your liking with the focusButtonClasses
203 | prop, or remove them all together with the showFocusButtons prop.
204 |
206 | Additionally, if you rather create a different control for focus blocks, you can pass a
207 | store to activeFocusBlockStore. With the store you can control the active
208 | index. Here for example, a button will focus the next block in the focusBlocks list:
209 |
223 | There are a lot of props to customize the look of the code block. Here I will only mention a 224 | few. For the complete list look at the table at the bottom of the page. 225 |
226 |
227 | By default the dimensions of the table are set to 'w-full h-fit', but you can
228 | change this with the dimensions prop.
229 |
231 | You can enable / disable both the header and the line numbers with showHeader
232 | and showLineNumbers respectively. You can change the displayed header text with
233 | the headerText prop, which by default is the uppercase of the specified language.
234 |
236 | To change the text size and default text color of non-highlighted code you can use the codeTextClasses
239 | prop. You can change the background color of the code block with background.
240 |
244 | You can add a bar between the line numbers and the code by updating the lineNumberTextClasses prop:
247 |
267 | The easiest way to avoid parsing errors of your string codes is to define your strings in a
268 | separate .ts or .js file and import them
269 | into your svelte file. This also keeps your svelte file cleaner and allows you to avoid the steps
270 | below.
271 |
274 | If you want to define the code in your svelte file then you need to be aware of the
275 | following steps. When pasting Svelte code that you want to display, you have to escape the closing
278 | script tag to avoid errors:
279 | {`<\\\/script>`}.
280 |
283 | Another error can occur if you have a
284 | {'