Markdown reference

Olares documentation is hosted using VitePress and supports standard Markdown syntax. For a complete guide, refer to the VitePress Markdown extensions.

This page covers customized styles available for documentation.

Images

Images are an essential part of documentation. Follow these styling guidelines for consistency.

• Use the #bordered modifier to add a rounded border and shadow effect to your images.

  ![Olares Architecture Diagram](/images/manual/architecture-diagram.png#bordered)

• Use modifier to control the width of an image.

  ![Olares Architecture Diagram](/images/manual/architecture-diagram.png#bordered){width="50%"}

Inline icons

Leverage Material Design icons to enrich your documentation. The Material Symbols library is already imported.

1. Visit Material Symbols and Icons library and locate the name of the icon. For example, search.

Tip

Frequently used icon names:

• search
• add
• more_horiz

2. Use the <i> tag with the class material-symbols-outlined to embed the icon. For example:

   Next to **Set custom Route ID**, click <i class="material-symbols-outlined">add</i>.

3. Verify that the icon renders correctly during your local preview.

Tabs

Use tabs to organize platform-specific or contextual instructions.

Basic template

<tabs>
<template #tab1>
content for tab1
</template>
<template #tab2>
content for tab2
</template>
</tabs>

In this example, tab1 and tab2 will be displayed as the tab labels.

Multi-word labels

Use dashes (-) in tab labels to represent spaces for multi-word labels:

<tabs>
<template #this-is-tab1>
content for tab1
</template>
<template #this-is-tab2>
content for tab2
</template>
</tabs>

Below is an example of a tabbed structure for autofill setup across platforms:

<tabs>
<template #Android>
1. Open **LarePass**, and go to **Settings** > **Autofill**.
2. Enable Autofill and select **LarePass** as your provider.
3. Accept the security notice when prompted.
</template>

<template #iOS>
Due to iOS system restrictions, you must manually enable autofill for LarePass:

1. Open the **Settings** app.
2. Search for Autofill settings.
3. Enable Autofill and select **LarePass** as your autofill provider.
</template>

<template #Chrome-extension>
Autofill is automatically enabled upon logging in with the browser extension.
</template>
</tabs>

Rendered result: