Hello World
Published 2024-09-01 | Pageviews

This is a markdown example website. Source code of this article.

Paragraphs #

Markdown is a lightweight markup language with concise syntax, allowing people to focus more on the content itself rather than the layout. It uses a plain text format that is easy to read and write to write documents, can be mixed with HTML, and can export HTML, PDF, and its own .md format files. Because of its simplicity, efficiency, readability, and ease of writing, Markdown is widely used, such as Github, Wikipedia, Jianshu, etc.

Emphasis #

I just love bold text.
Italicized text is the cat's meow.
Underline requires <ins> HTML syntax
Delete this text.
Link to the github.

Quoting text #

Markdown is a lightweight markup language with concise syntax, allowing people to focus more on the content itself rather than the layout. It uses a plain text format that is easy to read and write to write documents, can be mixed with HTML, and can export HTML, PDF, and its own .md format files. Because of its simplicity, efficiency, readability, and ease of writing, Markdown is widely used, such as Github, Wikipedia, Jianshu, etc.

Lists #

Ordered Lists

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

Unordered Lists

  • First item
  • Second item
  • Third item
  • Fourth item

Task lists

Explorer #

README.md
README.md
# mdit-explorer

A markdown-it plugin, For rendering an embedded code explorer similar to VS Code style.

## In the md file
```md
::: explorer ./demo
defaultopen=src/main.cpp
addfile=src/main.cpp
addfile=src/main.h
excludefile=src/main.h
:::
```

- `./demo`: The folder to be parsed and scanned.
- `defaultopen`: The file to open by default.
- `addfile`: Optional. Only render the specified file. Repeat the directive to add multiple files.
- `excludefile`: Optional. Exclude the specified file. Repeat the directive to exclude multiple files. Exclusions take precedence over additions.

Remote HTTP(S) Git repositories are shallow-cloned while Markdown is rendered:

```md
::: explorer https://github.com/fdxx/mdit-explorer.git
defaultopen=src/index.js
:::
```

The generated HTML contains the repository files and does not access Git at runtime. Binary files remain visible in the tree and display `Binary file` instead of their contents.


## Use in markdown-it
```js
import markdownit from 'markdown-it';
import hljs from 'highlight.js';
import explorer from 'mdit-explorer';

const mdrenderer = markdownit({ html: true, highlight })
  .use(explorer)
```

## Plugin Options

```js
import explorer from 'mdit-explorer';

const mdrenderer = markdownit({ html: true, highlight })
  .use(explorer, { injectAssets: false, lineNumbers: true, root: 'path/to' })
```

- `injectAssets`: Inline `style.css` and `browser.js`. They are injected only once when rendering multiple blocks. Defaults to `false`.
- `lineNumbers`: Show line numbers in the code area. Defaults to `true`; `browser.js` generates them only when a file is viewed for the first time.
- `root`: Where to start searching the directory. Defaults to `process.cwd()`.

Table #

Left-aligned Center-aligned Right-aligned
git status git status git status
git diff git diff git diff

Code blocks #

#include <iostream>

int main(int argc, char *argv[]) {

    /* An annoying "Hello World" example */
    for (auto i = 0; i < 0xFFFF; i++)
        cout << "Hello, World!" << endl;

    char c = '\n';
    unordered_map <string, vector<string> > m;
    m["key"] = "\\\\"; // this is an error

    return -2e3 + 12l;
}

package main

import "fmt"

func main() {
    ch := make(chan float64)
    ch <- 1.0e10    // magic number
    x, ok := <- ch
    defer fmt.Println(`exitting now\`)
    go println(len("hello world!"))
    return
}

#!/bin/bash

###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

if [ "$UID" -ne 0 ]
then
 echo "Superuser rights required"
 exit 2
fi

genApacheConf(){
 echo -e "# Host ${HOME_DIR}$1/$2 :"
}

echo '"quoted"' | tr -d \" > text.txt

[
    {
        "title": "apples",
        "count": [12000, 20000],
        "description": {"text": "...", "sensitive": false}
    },
    {
        "title": "oranges",
        "count": [17500, null],
        "description": {"text": "...", "sensitive": false}
    }
]

Footnotes #

Here is a simple footnote[1].
The footnote will appear at the bottom[2].

Collapsed sections #

Click to expand You can temporarily obscure sections of your Markdown by creating a collapsed section that the reader can choose to expand. For example, when you want to include technical details in an issue comment that may not be relevant or interesting to every reader, you can put those details in a collapsed section.

Emoji #

😂🤣😡📱🇨🇳😍

Tabs #

This is Apple!

This is Banana!

This is Orange!

aaa

bbb

ccc

Alerts #

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

Images #

Online images

Local images

  1. My reference. ↩︎

  2. Good night makabaka. ↩︎

test1
test2