Sveltepress

Manually import

All built-in Components can directly use in markdown files. But should be imported manually in svelte files.

Links

Props

label - The link label text
to - The link address
target - The link target attribute (e.g., _blank to open in new tab, _self to open in same tab). Default behavior: external links open in new tab automatically
withBase - Determine whether to with sveltekit config.kit.paths.base. Default is true

Auto external icon

Would auto add a external icon when link address starts with http or https

In markdown

* <Link to="https://github.com/" label="Github" />
* <Link to="/" label="Home page" />

In svelte

<script>
  import { 
type Link = SvelteComponent<Record<string, any>, any, any>
const Link: LegacyComponentTypeLink } from '@sveltepress/theme-default/components' 
</script>
<div style: stringstyle="line-height: 24px;">
  <const Link: LegacyComponentTypeLink to: stringto="/" label: stringlabel="Home page" /> <br />
  <const Link: LegacyComponentTypeLink to: stringto="https://github.com/" label: stringlabel="Github" />
</div>

svelte

Tabs & TabPanel

Tab Props

activeName - The default active panel name.
bodyPadding - Determine whether the panel body has a padding or not. Default is true

TabPanel Props

name - The panel name.
activeIcon - The icon component used when tab is active
inactiveIcon - The icon component used when tab is inactive

In Markdown

Counter.svelte

<script>
  let let count: numbercount = 
function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:

let count = $state(0);
@seehttps://svelte.dev/docs/svelte/$state Documentation@paraminitial  The initial value$
function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:

let count = $state(0);
@seehttps://svelte.dev/docs/svelte/$state Documentation@paraminitial  The initial valuestate(0)
</script>
<button onclick: () => numberonclick={() => let count: numbercount++}>
  You've clicked {let count: numbercount} times
</button>

svelte

Counter.vue

<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>
<button @click="count++">
  You've clicked {count} times
</button>

html

<Tabs activeName="Svelte">
  <TabPanel name="Svelte">

```svelte title="Counter.svelte"
<script>
  let count = $state(0)
</script>
<button onclick={() => count++}>
  You've clicked {count} times
</button>
```

  </TabPanel>

  <TabPanel name="Vue">

```html  title="Counter.vue"
<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>
<button @click="count++">
  You've clicked {count} times
</button>
```

  </TabPanel>
</Tabs>

In svelte

<script>
  import { 
type TabPanel = SvelteComponent<Record<string, any>, any, any>
const TabPanel: LegacyComponentTypeTabPanel, 
type Tabs = SvelteComponent<Record<string, any>, any, any>
const Tabs: LegacyComponentTypeTabs } from '@sveltepress/theme-default/components' 
</script>
<const Tabs: LegacyComponentTypeTabs activeName: stringactiveName="Tab2">
  <const TabPanel: LegacyComponentTypeTabPanel name: stringname="Tab1">
    <div>Tab1 content</div>
  </const TabPanel: LegacyComponentTypeTabPanel>
  <const TabPanel: LegacyComponentTypeTabPanel name: stringname="Tab2">
    <div>Tab2 content</div>
  </const TabPanel: LegacyComponentTypeTabPanel>
</const Tabs: LegacyComponentTypeTabs>

svelte

Expansion

Props

title - The expansion title
showIcon - Determine whether to the icon or not. Default is true
headerStyle - Customize the header inline style
bind:expanded - Determine the expanded status. Default is false

Slots

default - The expansion content
icon-fold - The icon used for folded
icon-expanded - The icon used for expanded
arrow - Customize the expansion arrow indicator

In markdown

Some content

<Expansion title="Click to expand/fold panel">
  <div class="text-[24px]">Some content</div>
</Expansion>

In svelte

<script>
  import { 
type Expansion = SvelteComponent<Record<string, any>, any, any>
const Expansion: LegacyComponentTypeExpansion } from '@sveltepress/theme-default/components'
</script>
<const Expansion: LegacyComponentTypeExpansion title: stringtitle="A expansion without custom icon and arrow">
  <div class: stringclass="p-4 text-[24px]">
    Look at the icon left. It gets colored when expanded!
  </div>
  {#snippet iconFold: () => anyiconFold()}
    <div class: stringclass="i-bxs-wink-smile"></div>
  {/snippet}
  {#snippet iconExpanded: () => anyiconExpanded()}
    <div class: stringclass="i-fxemoji-smiletongue"></div>
  {/snippet}
  {#snippet arrow: () => anyarrow()}
    <div class: stringclass="i-material-symbols-thumbs-up-down"></div>
  const iconFold: any{/const iconFold: anysniconst iconFold: anyppeconst iconExpanded: anytconst iconExpanded: any}
</const Expansion: LegacyComponentTypeExpansion>

svelte

Icons (Pre-build iconify icons)

Icon pre-build required

The iconify icons should be in the Pre-build iconify icons config

In markdown

<div class="text-8 p-4">
  <IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>

In svelte

<script>
  import { 
type IconifyIcon = SvelteComponent<Record<string, any>, any, any>
const IconifyIcon: LegacyComponentTypeIconifyIcon } from '@sveltepress/theme-default/components'
</script>
<div style: stringstyle="font-size: 28px;">
  <const IconifyIcon: LegacyComponentTypeIconifyIcon collection: stringcollection="vscode-icons" name: stringname="file-type-svelte" />
</div>

svelte

Floating

In markdown

Floating content

Trigger

<Floating placement="top">
  <div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    Trigger
  </div>
  {#snippet floatingContent()}
    <div class="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4">
      Floating content
    </div>
  {/snippet}
</Floating>

In svelte

<script>
  import 
type Floating = {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<PropType>): void;
}
const Floating: Component<PropType, {}, "">Floating from '@sveltepress/twoslash/FloatingWrapper.svelte'
</script>
<const Floating: Component<PropType, {}, "">Floating PropType.placement?: Placement | undefinedplacement="right">
  <div class: stringclass="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    Trigger
  </div>

  {#snippet PropType.floatingContent?: Snippet<[]> | undefinedfloatingContent()}
    <div class: stringclass="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4">
      Floating content
    </div>
  const floatingContent: Snippet<[]> | undefined{/const floatingContent: Snippet<[]> | undefinedsnippetconst floatingContent: Snippet<[]> | undefined}
</const Floating: Component<PropType, {}, "">Flconst Floating: Component<PropType, {}, "">oating>

svelte

Props

alwaysShow - Determine whether to always show the floating content. Default is false
placement - Determine the floating content position. See placement - floating-ui. Default is bottom.
floatingClass - The addition classes that will be added to the floating content container.

CodeBlock

In markdown

<CodeBlock lang="ts" code="const foo = 'bar'" />

In markdown

<script>
  import { 
type CodeBlock = SvelteComponent<Record<string, any>, any, any>
const CodeBlock: LegacyComponentTypeCodeBlock } from '@sveltepress/theme-default/components'
</script>
<const CodeBlock: LegacyComponentTypeCodeBlock lang: stringlang="ts" code: stringcode="const foo = 'bar'" />

svelte

Props

lang - The language name. 'svelte', 'md', 'js', ...etc
code - The code content