Emoji on Liveblog47

Demo - Support for Diagrams

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

Feel free to switch between the light and dark themes to see how the diagram adapts its colors accordingly.

# Mermaid Diagrams

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d

Get more examples at About Mermaid

gitGraph:
    commit "Ashish"
    branch newbranch
    checkout newbranch
    commit id:"1111"
    commit tag:"test"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge newbranch
    commit
    branch b2
    commit

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

sankey-beta

Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672

sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end

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 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

# GoAT

Demo - Support for code, pre, kbd, mark

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

# Individual support for code, pre, kbd, mark

code

pre

CRTL + K + B + D

Feel free to switch between the light and dark themes to see the rendering differences.

## Support for <code> tag

Direct Code

A verrrrrryyyyy llloooonnnggg coooodeeee

code is here

multiline
code
here

// ```typescript
interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

1// ```typescript {linenos=inline}
2function updateUser(id: number, update: Partial<User>) {
3  const user = getUser(id)
4  const newUser = { ...user, ...update }
5  saveUser(id, newUser)
6}

// ```typescript {linenos=true}
function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

## Support for <pre> tag

pre text

pre text

pre text

## Support for <kbd> tag

Press CTRL + C to copy text (Windows).

Press CMD + C to copy text (Mac OS).

Press CTRL+ALT+Delete to end the session.

## Support for <mark> tag

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

## Support for <kbd> in <pre>

This is a KBD inside a pre.

## Support for <kbd> in <code> (❌ Should not be used)

This is a KBD inside a code.

## Support for <code> in <pre> (❌ Should not be used)

This is a CODE inside a pre.

## Support for <code> in <kbd> (❌ Should not be used)

This is a CODE inside a kbd.

## Support for <pre> in <kbd> (❌ Should not be used)

This is a

PRE

inside a kbd.

## Support for <pre> in <code> (❌ Should not be used)

This is a

PRE

inside a code.

## Support for <mark> in <kbd>

This is a MARK inside a kbd.

## Support for <mark> in <code>

This is a MARK inside a code.

## Support for <mark> in <pre>

This is a MARK inside a pre.

Advanced Style

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

There are examples of how to use custom global-wise style or page-wise style.

The custom .css .scss .sass file should be placed in assets/ folder. (instead of static/)

This page is affected by assets/css/custom1.scss and assets/css/custom2.css and advanced-style/style.css

advanced-style/style.css affects only the current page.

<style>
  @import 'style.css';
</style>

assets/css/custom1.scss and assets/css/custom2.scss will have global effect.

// assets/css/custom2.css
.anubis-custom-style {
    background-color: pink;
    color: black;
    padding: 1em;
    border-radius: 0.3em;
    border: 1px solid black;
}

// assets/css/foundation/_vars.scss
$font-stack: Helvetica, sans-serif;
$primary-color: rgb(255, 255, 168);
$background-color: rgb(85, 85, 85);

// assets/css/custom1.scss
@import 'foundation/vars';

junyi {
    display: block;
    font: 100% $font-stack;
    color: $primary-color;
    background-color: $background-color;
    margin-top: 1em;
}

Emoji Support

me@junyi.dev (Junyi) — Tue, 05 Mar 2019 00:00:00 +0000

Emoji can be enabled in a Hugo project in a number of ways.

The emojify function can be called directly in templates or Inline Shortcodes.

To enable emoji globally, set enableEmoji to true in your site’s configuration and then you can type emoji shorthand codes directly in content files; e.g.

🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:

The Emoji cheat sheet is a useful reference for emoji shorthand codes.

N.B. The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.

.emoji {
font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
}