Blog

Typography

Typography sizing and spacing for blog posts of Svelte Vietnam is set up based on the default configuration of @tailwincss/typography, inside elements with the "prose" class. Small customizations are added to ensure consistency with the overall design of sveltevietnam.dev. You can inspect these customization at tailwind.config.js.

Rendering Source Code

Technical blog posts often contain code blocks as examples. Svelte Vietnam uses shiki to provide syntax highlighting. To render a code block, use the same syntax as in markdown

```Language
Source code
```

For example, using the svelte language will produce the following result:

<!-- +page.svelte -->

<script>
	import { Breadcrumbs } from '$lib/components/Breadcrumbs';
</script>

<main>
	<Breadcrumbs />
	<h1 class="c-text-h1">Title</h1>
	<p>Description</p>
</main>

<style>
	h1 {
		color: blue;
	}
</style>

Currently, the supported languages are svelte, javascript, typescript, and shellscript. If you need to add more language, inspect the "shiki" configuration at mdsvex.config.js.

Diff

To visualize code change, you can wrap the lines in comment with the directive `:::diff +` or `:::diff -`. For example, the following markdown...

```javascript
// :::diff -
// export const OLD = 'old';
// :::
// :::diff +
// export const NEW = 'new';
// :::
```

...will render as:

const OUTDATED = 'outdated';
const NEW = 'new';

Highlight

Similarly, for highlighting text, you can wrap the lines in comment with the directive `:::highlight`. For example, the following markdown...

```javascript
function handle({ event, resolve }) {
  // :::highlight
  console.log(event);
  // :::
  return resolve(event);
}
```

...will render as:

function handle({ event, resolve }) {
	console.log(event);
	return resolve(event);
}

Common Components

Patterns of markup structure and styling will emerge from the process of writing. These are opportunities to extract reusable components for writers to utilize in later blog posts.

Callout

These are details put inside highlighted boxes that express additional context to support the current document, for when you want to capture readers attention to important messages or instructions. To use, you need to add to your HTML element the class `c-callout` together with one of the following modifiers: `c-callout--info`, `c-callout--success`, `c-callout--warning`, `c-callout-error`.

Use `c-callout-info` to express a generic notification or instruction
Use `c-callout-success` to express a completion, or encouragement
Use `c-callout-warning` to express, unsurprisingly, a warning
Use `c-callout-error` to express a bad scenario, an error, or discouragement

It is also possible to specify some additional special variant to change the appearance of the top left icon.

Combine with `c-callout--icon-bulb` to express creativity
Combine with `c-callout--icon-confetti` to express celebration
Combine with `c-callout-icon-trophy` to express gratitude
Combine with `c-callout-icon-megaphone` for announcement or call for action
Combine with `c-callout-icon-question` to express uncertainty or a questioning context

When writing blog posts with the extended markdown syntax from Svelte Vietnam, you can wrap a section in callout using the ":::" container syntax made possible by the remark-container library.

:::div c-callout c-callout--info
Use `c-callout-info` to express a generic notification or instruction
:::