Demo Page

Text can be bold, italic, or strikethrough.

Link to another page.

There should be whitespace between paragraphs.

There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.

Heading 1

This is a normal paragraph following a header. Codeberg is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

Heading 2

This is a blockquote following a header.

When something is important enough, you do it even if the odds are not in your favor.

Heading 3

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require("./lang/" + l);
  return true;
};

# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end

Heading 4

• This is an unordered list following a header.
• This is an unordered list following a header.
• This is an unordered list following a header.

Heading 5

1. This is an ordered list following a header.
2. This is an ordered list following a header.
3. This is an ordered list following a header.

Heading 6

There’s a horizontal rule below this.

Here is an unordered list:

• Item foo
• Item bar
• Item baz
• Item zip

And an ordered list:

1. Item one
2. Item two
3. Item three
4. Item four

And a nested list:

• level 1 item
  • level 2 item
  • level 2 item
    • level 3 item
    • level 3 item
• level 1 item
  • level 2 item
  • level 2 item
  • level 2 item
• level 1 item
  • level 2 item
  • level 2 item
• level 1 item

Here are checkboxes:

• Milk
• Eggs
• Flour
• Coffee
• Combustible lemons

Same but interactive

• Milk
• Eggs
• Flour
• Coffee
• Combustible lemons

With radio type

• Milk
• Eggs
• Flour
• Coffee
• Combustible lemons

Small image

Large image

Definition lists can be used with HTML syntax.

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Green

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.

The final element.

Extra

Alright now that the generic (slightly extended) Jekyll Zola demo page have ended, we can get to the custom stuff, which believe me, is neat.

😭😂🥺🤣❤️✨🙏😍🥰😊

Shortcodes

Duckquill provides a few useful shortcodes that simplify some tasks.

Image

By default images come with styling, such as rounded corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations.

Available variables are:

• url: URL to an image.
• url_min: URL to compressed version of an image, original can be opened by clicking on the image.
• alt: Alt text, same as if the text were inside square brackets in Markdown.
• full: Forces image/video to be full-width.
• pixels: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
• transparent: Removes rounded corners and shadow, useful for transparent images.
• no_hover: Removes zoom on hover.

Variables should be comma-separated and be inside the brackets.

{{ image(url="image.png", alt="This is an image" no_hover=true) }}

Alternatively, you can append the following url anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes.

• #full: Forces image/video to be full-width.
• #pixels: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
• #transparent: Removes rounded corners and shadow, useful for transparent images.
• #no-hover: Removes zoom on hover.

Video

Same as images, but with a few differences: no_hover and url_min are not available.

{{ video(url="video.webm", alt="This is a video") }}

CRT

Alright, this one doesn’t simplify anything, it just adds a CRT-like effect around Markdown code blocks.

{% crt() %}
-> Markdown code block <-
{% end %}

 _____________________________________________
|.'',        Public_Library_Halls         ,''.|
|.'.'',                                 ,''.'.|
|.'.'.'',                             ,''.'.'.|
|.'.'.'.'',                         ,''.'.'.'.|
|.'.'.'.'.|                         |.'.'.'.'.|
|.'.'.'.'.|===;                 ;===|.'.'.'.'.|
|.'.'.'.'.|:::|',             ,'|:::|.'.'.'.'.|
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|.'.'.'.'.|---|','   /%%%\   ','|---|.'.'.'.'.|
|.'.'.'.'.|===:'    /%%%%%\    ':===|.'.'.'.'.|
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|.'.'.'.','       /%%%%%%%%%\       ','.'.'.'.|
|.'.'.','        /%%%%%%%%%%%\        ','.'.'.|
|.'.','         /%%%%%%%%%%%%%\         ','.'.|
|.','          /%%%%%%%%%%%%%%%\          ','.|
|;____________/%%%%%Spicer%%%%%%\____________;|

Captions

Media can have additional text description using the <figcaption> HTML tag directly under it.

![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
<figcaption>The image caption</figcaption>

Accordion

Small

Small, cute text that doesn’t catch attention.

Abbreviation

The ASCII art are awesome!

Aside

A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.

As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.

Keyboard shortcut

<kbd>⌘ Super</kbd> + <kbd>Space</kbd>

To switch the keyboard layout, press ⌘ Super + Space.

Highlighted

You know what? I’m gonna say some very important stuff, so important that even bold is not enough.

External link

<a class="external" href="https://example.org">Link to site</a>

Link to site

Buttons

<p class="dialog-buttons">
  <a class="inline-button" href="#top">Go to top</a>
  <a href="{{site.issuesurl}}">File an issue</a>
</p>

Look at the end of this page xD