Blog

Chữ viết

Kích cỡ và khoảng cách chữ viết cho bài viết tại Blog của Svelte Việt Nam được thiết lập dựa trên cấu hình mặc định của @tailwincss/typography, bên trong phần tử mang lớp "prose". Một số màu sắc và phương thức hiển thị được tùy chỉnh để phù hợp với thiết kế chung của sveltevietnam.dev. Bạn có thể xem cụ thể các tùy chỉnh đó tại tailwind.config.js.

Hiển thị mã nguồn

Các bài viết mang tính kỹ thuật thường cần hiển thị các đoạn mã làm ví dụ. Svelte Việt Nam sử dụng thư viện shiki để cung cấp màu sắc cho cú pháp (syntax highlighting). Cầu hình hiện tại sử dụng theme "Github Dark Dimmed". Để hiển thị một đoạn code, hãy sử dụng cú pháp giống như trong markdown.

```Ngôn ngữ
Mã nguồn
```

Ví dụ, sử dụng ngôn ngữ svelte sẽ cho kết quả hiện thị đoạn mã như sau:

<!-- +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>

Hiện tại, các ngôn ngữ được hỗ trợ là: svelte, javascript, typescript, và shellscript. Nếu có nhu cầu thêm ngôn ngữ khác, hãy tham khảo cấu hình "shiki" tại mdsvex.config.js.

Diff

Để thể hiện thay đổi trong mã nguồn, bạn có thể gói các dòng mã cần thiết trong dòng chú thích với chỉ thị `:::diff +` hoặc `:::diff -`. Ví dụ, đoạn mã sau...

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

...sẽ hiển thị:

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

Highlight

Tương tự, để làm nổi bật một đoạn mã, bạn có thể gói các dòng mã cần thiết trong dòng chú thích với chỉ thị `:::highlight`. Ví dụ, đoạn mã sau...

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

...sẽ hiển thị:

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

Thành phần thường gặp

Trong quá trình viết bài sẽ xuất hiện các kết cấu và hình mẫu được sử dụng nhiều lần. Đây là cơ hội để tổng hợp thành những thành phần chung giúp người viết có thể dễ dàng tái sử dụng cho những bài viết sau.

Chú thích

Đây là chi tiết đươc đặt trong một ô màu, mang ngữ nghĩa bổ sung cho văn bản hiện tại, thường dùng khi bạn muốn người đọc nhanh chóng nhận biết và chú ý vào một hướng dẫn, lời nhắn nào đó. Để sử dụng, bạn cần thêm vào phần tử HTML một lớp `c-callout` và một trong nhưng biến thể sau đây: `c-callout--info`, `c-callout--success`, `c-callout--warning`, `c-callout-error`.

Dùng `c-callout-info` để thể hiện một hướng dẫn, thông báo chung
Dùng `c-callout-success` để thể hiện một chi tiết mang tính hoàn thiện, thành công, khuyến khích
Dùng `c-callout-warning` để thể hiện một cảnh báo
Dùng `c-callout-error` để thể hiện một thông báo lỗi hoặc một tình huống xấu

Ngoài ra, ta còn có thể kết hợp một số biến thể đặc biệt giúp thay đổi biểu tượng ở góc trái, trên.

Kết hợp với `c-callout--icon-bulb` để thể hiện ý tưởng hoặc sự sáng tạo
Kết hợp với `c-callout--icon-confetti` để thể hiện một điều mới mẻ hoặc sự vui mừng
Kết hợp vói `c-callout--icon-trophy` để thể hiện sự tuyên dương, tán thưởng
Kết hợp vói `c-callout--icon-megaphone` cho thông báo hoặc kêu gọi hành động
Kết hợp vói `c-callout--icon-question` cho câu hỏi hoặc thể hiện sự nghi vấn, trạng thái không chắc chắn

Trong khi viết bài bằng cú pháp markdown mở rộng của Svelte Việt Nam (mdsvex), bạn có thể gói một phân đoạn trong ô chú thích bằng cú pháp ":::" từ thư viện remark-container.

:::div c-callout c-callout--info
Dùng `c-callout-info` để thể hiện một hướng dẫn, thông báo chung
:::