Code Blocks#

Syntax Highlighting#

Syntax Highlighting

console.log('This code is syntax highlighted!')

ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold:    Red Green Yellow Blue Magenta Cyan
- Dimmed:  Red Green Yellow Blue Magenta Cyan

256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177

Full RGB colors:
ForestGreen - RGB(34, 139, 34)

Text formatting: Bold Dimmed Italic Underline

console.log('Title attribute example')

<div>File name comment example</div>

echo "This terminal frame has no title"

Write-Output "This one has a title!"

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

this line will be marked as inserted
this line will be marked as deleted
this is a regular line

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

function thisIsJavaScript() {
  // This entire block gets highlighted as JavaScript,
  // and we can still add diff markers to it!
  console.log('Old code to be removed')
  console.log('New and shiny code!')
}

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

console.log('The words yes and yep will be marked.')

echo "Test" > /home/test.txt

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Collapsible Sections#

Collapsible Sections

// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

Line Numbers#

Line Numbers

1
// This code block will show line numbers
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

5
console.log('Greetings from line 5!')
6
console.log('I am on line 6')

Tables#

Add the following script to the top of the post

<style>
    .custom-md img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    table th {
        width: 1000px;
    }
</style>

Video#

• Keep aspect
  • add to tag class="keepaspect"
• Adding Google Drive video
  • Replace FILEID with the video’s id

<iframe src="https://drive.google.com/file/d/FILEID/preview" class="keepaspect" allow="autoplay"></iframe>

Images#

Add the following at the top

<style>
    .custom-md img {
        mask-image: url("/masks/paintmask-1.png");
        mask-size: 100%;
    }
</style>

Or if you want a single image

<paintmask>
  content goes here
</paintmask>

Unity WebGL Embed#

1. Add game to /src/games/
2. Rename index.html to index.astro

<iframe class="keepaspect" id="online-game-frame" type="text/html" src="/src/games/gamename/index.astro" scrolling="no"></iframe>

Creating a New Page#

// TODO. Automate this!

1. Add to LinkPreset in src\config.ts

20
export const navBarConfig: NavBarConfig = {
21
  links: [
22
    LinkPreset.Home,
23
    LinkPreset.Archive,
24
    LinkPreset.About,
25
    LinkPreset.AddHere,
26
  ],
27
}

2. Add to LinkPreset in src\types\config.ts

14
export enum LinkPreset {
15
  Home = 0,
16
  Archive = 1,
17
  About = 2,
18
  AddHere = 3,
19
}

3. Add to LinkPresets in src\constants\link-presets.ts

5
export const LinkPresets: { [key in LinkPreset]: NavBarLink } = {
6
    [LinkPreset.Home]: {
7
        name: i18n(I18nKey.home),
8
        url: '/',
9
    },
10
    [LinkPreset.About]: {
11
        name: i18n(I18nKey.about),
12
        url: '/about',
13
    },
14
    [LinkPreset.Archive]: {
15
        name: i18n(I18nKey.archive),
16
        url: '/archive',
17
    },
18
    [LinkPreset.Test]: {
19
        name: i18n(I18nKey.test),
20
        url: '/test',
21
    },
22
    [LinkPreset.AddHere]: {
23
        name: i18n(I18nKey.AddHere),
24
        url: '/addhere',
25
    },
26
}

4. Add the translation within the ‘en.ts’ file

   • You can do this with all the translations if you’d like… I’m lazy

5. Add to i18nKey.ts

6. Create an astro file within src\pages\

   • src\pages\test.astro

7. Paste the following code into it. Making sure to change the names

1
---
2
import MainGridLayout from "../layouts/MainGridLayout.astro";
3

4
import { getEntry } from 'astro:content'
5
import {i18n} from "../i18n/translation";
6
import I18nKey from "../i18n/i18nKey";
7
import Markdown from "@components/misc/Markdown.astro";
8

9
const test = await getEntry('addhere', 'addhere')
10

11
const { Content } = await test.render()
12
---
13

14
<MainGridLayout title={i18n(I18nKey.addhere)}>
15
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
16
        <div class="card-base z-10 px-9 py-6 relative w-full ">
17
            <Markdown class="mt-2">
18
                <Content />
19
            </Markdown>
20
        </div>
21
    </div>
22
</MainGridLayout>

6. Create a markdown file within src\content\addhere
   • src\content\addhere\addhere.md
7. You’re done!!!
   • Hopefully you remember you have this here as a reference!

GitHub repository cards#

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions#

Following types of admonitions are supported: note tip important warning caution

NOTE

Highlights information that users should take into account, even when skimming.

TIP

Optional information to help a user be more successful.

IMPORTANT

Crucial information necessary for users to succeed.

WARNING

Critical content demanding immediate user attention due to potential risks.

CAUTION

Negative potential consequences of an action.

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

The title of the admonition can be customized.

MY CUSTOM TITLE

This is a note with a custom title.

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

TIP

The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.