Một số công cụ soạn thảo nội dung cho Blog

Trình bày bài viết

Blog này sử dụng một số cách trình bày các loại nội dung, bài viết này mục đích để thông tin cách sử dụng các công cụ khi viết bài.

1. Viết mã Markdown

Cách viết mã

Xem tại https://vi.wikipedia.org/wiki/Markdown

2. Trình bày task list như Github

Cách viết mã

- [x] Finish my changes
- [ ] Push my commits to GitHub
- [ ] Open a pull request

Kết quả hiển thị

• Finish my changes
• Push my commits to GitHub
• Open a pull request

3. Trình bày mã inline

Cách viết mã

1. Use `{ctrl}`+`{c}` to copy text.
2. Use `{ctrl}`+`{v}` to paste text.
3. Open task manager: `{ctrl}`+`{alt}`+`{del}`

Kết quả hiển thị

1. Use ctrl+c to copy text.
2. Use ctrl+v to paste text.
3. Open task manager: ctrl+alt+del

4. Công cụ hightlight Code lập trình

Cách viết mã

Ví dụ viết code theo ngôn ngữ dart

```dart
import 'package:flutter/material.dart';
//... other codes here
```

Kết quả hiển thị

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:get/get.dart';
import 'package:wonder_management/controllers/bindings/auth_binding.dart';
import 'package:wonder_management/generated/l10n.dart';
import 'package:wonder_management/ui/pages/root/root_page.dart';
import 'package:wonder_management/utilities/loading.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      initialRoute: "/",
      initialBinding: AuthBinding(),
      home: RootPage(),
      builder: Loading.initLoading(),
    );
  }
}

6. Trình bày công thức toán học Mathjax

Cách viết mã

```mathjax
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
```

Kết quả hiển thị

f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

7. Công cụ Mermaid vẽ các loại sơ đồ

Xem thêm tại https://mermaid.js.org/intro/

Cách viết mã

```mermaid
... mã ở đây
```

Kết quả hiển thị

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

8. Công cụ Flow vẽ các loại sơ đồ quy trình, luồng

Xem thêm tại https://flowchart.js.org/

Cách viết mã

```flow
st=>start: Need something to be translated!:>https://www.localistars.com[blank]
e=>end: Be happy!:>https://youtu.be/e6Ede8hdU8c
cond=>condition: Are you a client
or a translator?
subc=>subroutine: Why should you choose a localistar?:>https://www.localistars.com/for-clients.html
subt=>subroutine: Why should you become a localistar?:>https://www.localistars.com/for-translators.html
op=>operation: Check out how it works!:>https://www.localistars.com/how-it-works.html
io=>inputoutput: Work together with your partner!:>https://www.localistars.app/login

st->cond
cond(no@client)->subc->op->io->e
cond(yes@translator)->subt->op->io->e
```

Kết quả hiển thị

st=>start: Need something to be translated!:>https://www.localistars.com[blank]
e=>end: Be happy!:>https://youtu.be/e6Ede8hdU8c
cond=>condition: Are you a client
or a translator?
subc=>subroutine: Why should you choose a localistar?:>https://www.localistars.com/for-clients.html
subt=>subroutine: Why should you become a localistar?:>https://www.localistars.com/for-translators.html
op=>operation: Check out how it works!:>https://www.localistars.com/how-it-works.html
io=>inputoutput: Work together with your partner!:>https://www.localistars.app/login

st->cond
cond(no@client)->subc->op->io->e
cond(yes@translator)->subt->op->io->e

9. Công cụ Flow vẽ sơ đồ quy trình, luồng đơn giản

Cách viết mã

```seq
A->B: Message
B->C: Message
B->B: aaa
C-->A: Message
```

Kết quả hiển thị

A->B: Message
B->C: Message
B->B: aaa
C-->A: Message

10. Công cụ Flow vẽ sơ đồ quy trình, luồng đơn giản Mermaid

Xem thêm tại https://mermaid.js.org/intro/

Cách viết mã

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!