RayCC
Cover Image

Sample blog post

Update

Sample Hugo Kayal

Table of Contents
+++
title = 'Sample blog post'
summary = "This is summary"
date = 2025-03-11
lastmod = 2025-03-16
tags = ["sample", "hugo", "kayal"]
coverImg = "moon.jpg"
# externalUrl = "https://www.example.com" # Redirect
draft = false
showDate = true
showToC = true
showComments = false
+++

View full source in Github

Directory 

content/
├─ blog/  <- Blog menu
│  ├─ 250311-sample/
│  │  ├─ index.md  <- Current post
│  │  ├─ moon.jpg  <- Current post's asset
├─ _index.html  <- Home page

h1

h2

h3

h4

h5
h6

Markdown

hello world hello world hello world hello world
hello world hello world hello world hello world
hello world hello world hello world hello world

  1. ordered
  2. list
    1. nested

link

[link](https://www.example.com "title")

https://www.example.com

<https://www.example.com>

place hold image
caption

![place hold image](https://place-hold.it/100x100 "caption")

block

quote

Code

inline code: inline code

1
2
3
4
5
6
7
8
9

# comment
list_var = [1, 2, 3, 4, 5]

def greet(name):
    return f"Hello, {name}!"

if len(list_var) < 10:
    for i in list_var:
        print(f"Number: {i}")
```python {linenos=true, hl_lines=[1,"4-5"]}
# comment
list_var = [1, 2, 3, 4, 5]

def greet(name):
    return f"Hello, {name}!"

if len(list_var) < 10:
    for i in list_var:
        print(f"Number: {i}")
```

Table

tabletabletable
lcr
lcr
lcr

Rich text

Figure

Nasa moon

Nasa moon

1
2
3
4
5

{{< figure
src="https://nasa3d.arc.nasa.gov/shared_assets/thumbnails/as11-44-6665/428x321"
alt="Nasa moon"
caption="Nasa moon"
loading="lazy" >}}

Callout

Hello world
Goodbye world
1
2
3
4

{{< callout >}}
Hello world  
Goodbye world
{{< /callout >}}
Hello world
1
2
3

{{< callout icon="apple" iconColor="#6482B4" cardColor="coral" textColor="#fff" >}}
Hello world  
{{< /callout >}}

Callout Preset

Info
1
2
3

{{< callout icon="circle-info" iconColor="#6482B4" cardColor="#D8E8FFB3" >}}
Info
{{< /callout >}}
Tip
1
2
3

{{< callout icon="bulb" iconColor="#78AAA0" cardColor="#E2F5ECB3" >}}
Tip
{{< /callout >}}
Warning
1
2
3

{{< callout icon="warning" iconColor="#C89632" cardColor="#FFF8D8B3" >}}
Warning
{{< /callout >}}
Danger
1
2
3

{{< callout icon="x-mark" iconColor="#B46464" cardColor="#FFE0E0B3" >}}
Danger
{{< /callout >}}

Detail Summary

Click to expandLorem ipsum dolor sit amet,

1
2
3

{{< collapse summary="Click to expand" open=false >}}
Lorem ipsum dolor sit amet, 
{{< /collapse >}}

Icon

Add .svg file in assets/icons/ and insert fill="currentColor" inside <svg> tag.

1

{{< icon "github" >}}

Youtube 

1

{{< youtube jNQXAC9IVRw >}}

QR code 

1
2
3

{{< qr >}}
https://raycc51.github.io/blog/250311-sample/
{{< /qr >}}

Shortcode markdown codeblock 

1

Youtube {{< youtube jNQXAC9IVRw >}}
1
2
3

```md {linenos=true}
Youtube {{</* youtube jNQXAC9IVRw */>}}
```