Icons on Liveblog47

Demo - Social Icons

me@junyi.dev (Junyi) — Sun, 05 May 2024 00:00:00 +0000

To use an icon, simply copy its shortcode and paste it into your content where you want the icon to appear. The shortcode must be enclosed in {{< >}}.

Here is a list of available icons, their shortcodes, and what they look like when rendered:

name	shortcode	icon
4chan	`{{< icon "4chan" >}}`
leetcode	`{{< icon "leetcode" >}}`
qq	`{{< icon "qq" >}}`
spotify	`{{< icon "spotify" >}}`
tinder	`{{< icon "tinder" >}}`
youtube	`{{< icon "youtube" >}}`
docs	`{{< icon "docs" >}}`
linkedin	`{{< icon "linkedin" >}}`
reddit	`{{< icon "reddit" >}}`
steam	`{{< icon "steam" >}}`
tumblr	`{{< icon "tumblr" >}}`
zhihu	`{{< icon "zhihu" >}}`
email	`{{< icon "email" >}}`
mastodon	`{{< icon "mastodon" >}}`
rss	`{{< icon "rss" >}}`
teams	`{{< icon "teams" >}}`
twitch	`{{< icon "twitch" >}}`
facebook	`{{< icon "facebook" >}}`
medium	`{{< icon "medium" >}}`
skype	`{{< icon "skype" >}}`
telegram	`{{< icon "telegram" >}}`
twitter	`{{< icon "twitter" >}}`
github	`{{< icon "github" >}}`
netease	`{{< icon "netease-music" >}}`
slack	`{{< icon "slack" >}}`
theme	`{{< icon "theme-dark" >}}`
vk	`{{< icon "vk" >}}`
gitlab	`{{< icon "gitlab" >}}`
notion	`{{< icon "notion" >}}`
snapchat	`{{< icon "snapchat" >}}`
theme	`{{< icon "theme-light" >}}`
weibo	`{{< icon "weibo" >}}`
instagram	`{{< icon "instagram" >}}`
patreon	`{{< icon "patreon" >}}`
soundcloud	`{{< icon "soundcloud" >}}`
tiktok	`{{< icon "tiktok" >}}`
x	`{{< icon "x" >}}`

Demo - Multiline Codes

me@junyi.dev (Junyi) — Tue, 23 Apr 2024 00:00:00 +0000

int main() {
    int a = 1;
    if (a == 999)
        // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
        // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
    }
    return 0;
}

# Truth Table

Item	Line Numbers	Highlight Lines	Anchor Lines	Wide CodeBlock Scroll	Supported
Full Feature Support	ture	true	true	✅	✅
	table	true	true	✅	✅
	table	true	false	✅	✅
	inline			✅	✅
	ture	true	false	✅	✅
	ture	false	false	✅	✅
	false	true	/	✅	✅
Basic Support	false	false	/	✅	✅

Note: Anubis2 does not support hl_inline=true

# Line Numbers, Highlight Lines

## Line Number (table) and Highlight Lines

linenos=table will give copy-and-paste friendly code blocks.

```c {linenos=table, hl_lines=[1,"3-4",8], linenostart=199}
// codes ...
```

int main() {
    int a = 1;
    if (a == 999)
        // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
        // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
    }
    return 0;
}

## Line Number (true) and Highlight Lines

```c {linenos=true, hl_lines=[1,"3-4",8], linenostart=1}
// codes ...
```

int main() {
    int a = 1;
    if (a == 999)
        // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
        // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
    }
    return 0;
}

## Line Number (inline) and Highlight Lines

```c {linenos=inline, hl_lines=[1,"3-4",8], linenostart=1}
// codes ...
```

1int main() {
2    int a = 1;
3    if (a == 999)
4                // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
5        // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
6    }
7    return 0;
8}

## Line Number (false) and Highlight Lines

linenos=false will turn off line numbers if it’s configured to be on in site configuration.

```c {linenos=false, hl_lines=[1,"3-4",8]}
// codes ...
```

int main() {
    int a = 1;
    if (a == 999)
                // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
        // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
    }
    return 0;
}

# Anchor, Inline, Shortcode

## Line Number (table) and Highlight Lines and Anchor

Now you can click on the line number to get a link to that line.

```c {linenos=table, hl_lines=[1,"3-4",8], linenostart=199, anchorlinenos=true}
// codes ...
```

int main() {
    int a = 1;
    if (a == 999)
        // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
        // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
    }
    return 0;
}

## Highlight Inline are not supported by Anubis2 ❌

```c {linenos=true,hl_lines=[1,3,5], hl_inline=true}
// codes ...
```

1 2 3 4 5 6 7 int main() { int a = 1; if (a == 999) // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content. } return 0; }