Did it now, really; also added a _index.html for the welcome box
This commit is contained in:
349
content/posts/showcase-code.de.md
Normal file
349
content/posts/showcase-code.de.md
Normal file
@@ -0,0 +1,349 @@
|
||||
+++
|
||||
author = "Radek"
|
||||
title = "Varianten von Code-Blöcken"
|
||||
date = "2025-04-09T07:17:39+02:00"
|
||||
description = "Beispielartikel, der die beliebtesten Programmiersprachen zeigt."
|
||||
tags = ["programming", "code"]
|
||||
+++
|
||||
|
||||
Seit v4.2.0 verwendet das Terminal-Theme Chroma als Syntax-Highlighter. Wie die Hugo-Dokumentation angibt: "Es ist in Go geschrieben und ist wirklich, wirklich schnell."
|
||||
|
||||
Im Folgenden sehen Sie viele grundlegende Präsentationen der Code-Blöcke, die je nach Bedarf verwendet werden können. Außer dem Beispiel des `{{ < code > }}` Shortcodes werden alle anderen Blöcke basierend auf der Konfiguration erzeugt, die Sie in der [offiziellen Hugo-Dokumentation](https://gohugo.io/content-management/syntax-highlighting/) nachlesen können.
|
||||
|
||||
---
|
||||
|
||||
## Beispiele:
|
||||
|
||||
### Roh-Block ohne spezifizierte Sprache (und ohne Syntaxhervorhebung)
|
||||
|
||||
```
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Beispiel HTML5-Dokument</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Mit spezifizierter Sprache
|
||||
|
||||
#### Zeilenhervorhebung
|
||||
|
||||
```html {hl_lines=[5]}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Beispiel HTML5-Dokument</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Zeilenhervorhebung / Tabellenzeilennummern
|
||||
|
||||
```html {linenos=table,hl_lines=[5]}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Beispiel HTML5-Dokument</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Zeilenhervorhebung / Inline-Zeilennummern
|
||||
|
||||
```html {linenos=inline,hl_lines=[5]}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Beispiel HTML5-Dokument</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Hugos interner `{{ < highlight > }}` Shortcode
|
||||
|
||||
{{< highlight html >}}
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Beispiel HTML5-Dokument</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
#### Benutzerdefinierter eingebauter `{{ < code > }}` Shortcode
|
||||
|
||||
{{< code title="Hey, dies ist der Titel eines Code-Blocks" language="html" open="true" opts="linenos=table" >}}
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Beispiel HTML5-Dokument</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
{{< /code >}}
|
||||
|
||||
## Programmiersprachen:
|
||||
|
||||
### A
|
||||
|
||||
```abap
|
||||
WRITE 'Hello, World!'.
|
||||
```
|
||||
|
||||
```actionscript
|
||||
package {
|
||||
public class HelloWorld {
|
||||
public static function main():void {
|
||||
trace("Hello, World!");
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ada
|
||||
with Ada.Text_IO; use Ada.Text_IO;
|
||||
procedure Hello is
|
||||
begin
|
||||
Put_Line("Hello, World!");
|
||||
end Hello;
|
||||
```
|
||||
|
||||
### B
|
||||
|
||||
```bash
|
||||
echo "Hello, World!"
|
||||
```
|
||||
|
||||
```brainfuck
|
||||
+[----->+++<]>.++++++++++++..+++.>++++++[->+++++++<]>+.------------.---.+++++.
|
||||
```
|
||||
|
||||
### C
|
||||
|
||||
```c
|
||||
#include <stdio.h>
|
||||
int main() {
|
||||
printf("Hello, World!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
```csharp
|
||||
using System;
|
||||
class Program {
|
||||
static void Main() {
|
||||
Console.WriteLine("Hello, World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```c++
|
||||
#include <iostream>
|
||||
int main() {
|
||||
std::cout << "Hello, World!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
### D
|
||||
|
||||
```d
|
||||
import std.stdio;
|
||||
void main() {
|
||||
writeln("Hello, World!");
|
||||
}
|
||||
```
|
||||
|
||||
### E
|
||||
|
||||
```elixir
|
||||
IO.puts "Hello, World!"
|
||||
```
|
||||
|
||||
```erlang
|
||||
-module(hello).
|
||||
-export([world/0]).
|
||||
world() -> io:format("Hello, World!~n").
|
||||
```
|
||||
|
||||
### F
|
||||
|
||||
```fsharp
|
||||
printfn "Hello, World!"
|
||||
```
|
||||
|
||||
### G
|
||||
|
||||
```go
|
||||
package main
|
||||
import "fmt"
|
||||
func main() {
|
||||
fmt.Println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
### H
|
||||
|
||||
```haskell
|
||||
main = putStrLn "Hello, World!"
|
||||
```
|
||||
|
||||
### J
|
||||
|
||||
```js
|
||||
var x, y, z; // Declare 3 variables
|
||||
x = 5; // Assign the value 5 to x
|
||||
y = 6; // Assign the value 6 to y
|
||||
z = x + y; // Assign the sum of x and y to z
|
||||
|
||||
document.getElementById("demo").innerHTML = "The value of z is " + z + ".";
|
||||
```
|
||||
|
||||
```jsx
|
||||
function Video({ video }) {
|
||||
return (
|
||||
<div>
|
||||
<Thumbnail video={video} />
|
||||
<a href={video.url}>
|
||||
<h3>{video.title}</h3>
|
||||
<p>{video.description}</p>
|
||||
</a>
|
||||
<LikeButton video={video} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
```java
|
||||
public class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### K
|
||||
|
||||
```kotlin
|
||||
fun main() {
|
||||
println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
### L
|
||||
|
||||
```lua
|
||||
print("Hello, World!")
|
||||
```
|
||||
|
||||
### M
|
||||
|
||||
```matlab
|
||||
disp('Hello, World!')
|
||||
```
|
||||
|
||||
### N
|
||||
|
||||
```nim
|
||||
echo "Hello, World!"
|
||||
```
|
||||
|
||||
### O
|
||||
|
||||
```objectivec
|
||||
#import <Foundation/Foundation.h>
|
||||
int main() {
|
||||
@autoreleasepool {
|
||||
NSLog(@"Hello, World!");
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
### P
|
||||
|
||||
```perl
|
||||
print("Hello, World!\n");
|
||||
```
|
||||
|
||||
```php
|
||||
<?php echo "Hello, World!"; ?>
|
||||
```
|
||||
|
||||
```python
|
||||
print("Hello, World!")
|
||||
```
|
||||
|
||||
### R
|
||||
|
||||
```r
|
||||
cat("Hello, World!\n")
|
||||
```
|
||||
|
||||
```ruby
|
||||
puts "Hello, World!"
|
||||
```
|
||||
|
||||
```rust
|
||||
fn main() {
|
||||
println!("Hello, World!");
|
||||
}
|
||||
```
|
||||
|
||||
### S
|
||||
|
||||
```scala
|
||||
object HelloWorld extends App {
|
||||
println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
### T
|
||||
|
||||
```typescript
|
||||
console.log("Hello, World!");
|
||||
```
|
||||
|
||||
### V
|
||||
|
||||
```vlang
|
||||
fn main() {
|
||||
println('Hello, World!')
|
||||
}
|
||||
```
|
||||
|
||||
### Z
|
||||
|
||||
```zig
|
||||
const std = @import("std");
|
||||
pub fn main() !void {
|
||||
std.debug.print("Hello, World!\n", .{});
|
||||
}
|
||||
```
|
349
content/posts/showcase-code.en.md
Normal file
349
content/posts/showcase-code.en.md
Normal file
@@ -0,0 +1,349 @@
|
||||
+++
|
||||
author = "Radek"
|
||||
title = "Code blocks variants"
|
||||
date = "2025-04-09T07:17:39+02:00"
|
||||
description = "Sample article showcasing most popular programming languages."
|
||||
tags = ["programming", "code"]
|
||||
+++
|
||||
|
||||
Since v4.2.0, Terminal Theme uses Chroma as syntax highlighter. As Hugo documentation refers: "it is built in Go and is really, really fast".
|
||||
|
||||
Below you can see many basic presentations of the code blocks you can use depending on your needs. Except the `{{ < code > }}` shortcode example, all other blocks are generated based on the configuration you can learn about from the [official Hugo docs](https://gohugo.io/content-management/syntax-highlighting/).
|
||||
|
||||
---
|
||||
|
||||
## Examples:
|
||||
|
||||
### Raw block with no specified language (and no syntax highlighting)
|
||||
|
||||
```
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### With specified language
|
||||
|
||||
#### Line highlighting
|
||||
|
||||
```html {hl_lines=[5]}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Line highlighting / table line numbers
|
||||
|
||||
```html {linenos=table,hl_lines=[5]}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Line highlighting / inline line numbers
|
||||
|
||||
```html {linenos=inline,hl_lines=[5]}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Hugo's internal `{{ < highlight > }}` shortcode
|
||||
|
||||
{{< highlight html >}}
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
#### Custom built-in `{{ < code > }}` shortcode
|
||||
|
||||
{{< code title="Hey, this is a code block title" language="html" open="true" opts="linenos=table" >}}
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
{{< /code >}}
|
||||
|
||||
## Programming languages:
|
||||
|
||||
### A
|
||||
|
||||
```abap
|
||||
WRITE 'Hello, World!'.
|
||||
```
|
||||
|
||||
```actionscript
|
||||
package {
|
||||
public class HelloWorld {
|
||||
public static function main():void {
|
||||
trace("Hello, World!");
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ada
|
||||
with Ada.Text_IO; use Ada.Text_IO;
|
||||
procedure Hello is
|
||||
begin
|
||||
Put_Line("Hello, World!");
|
||||
end Hello;
|
||||
```
|
||||
|
||||
### B
|
||||
|
||||
```bash
|
||||
echo "Hello, World!"
|
||||
```
|
||||
|
||||
```brainfuck
|
||||
+[----->+++<]>.++++++++++++..+++.>++++++[->+++++++<]>+.------------.---.+++++.
|
||||
```
|
||||
|
||||
### C
|
||||
|
||||
```c
|
||||
#include <stdio.h>
|
||||
int main() {
|
||||
printf("Hello, World!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
```csharp
|
||||
using System;
|
||||
class Program {
|
||||
static void Main() {
|
||||
Console.WriteLine("Hello, World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```c++
|
||||
#include <iostream>
|
||||
int main() {
|
||||
std::cout << "Hello, World!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
### D
|
||||
|
||||
```d
|
||||
import std.stdio;
|
||||
void main() {
|
||||
writeln("Hello, World!");
|
||||
}
|
||||
```
|
||||
|
||||
### E
|
||||
|
||||
```elixir
|
||||
IO.puts "Hello, World!"
|
||||
```
|
||||
|
||||
```erlang
|
||||
-module(hello).
|
||||
-export([world/0]).
|
||||
world() -> io:format("Hello, World!~n").
|
||||
```
|
||||
|
||||
### F
|
||||
|
||||
```fsharp
|
||||
printfn "Hello, World!"
|
||||
```
|
||||
|
||||
### G
|
||||
|
||||
```go
|
||||
package main
|
||||
import "fmt"
|
||||
func main() {
|
||||
fmt.Println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
### H
|
||||
|
||||
```haskell
|
||||
main = putStrLn "Hello, World!"
|
||||
```
|
||||
|
||||
### J
|
||||
|
||||
```js
|
||||
var x, y, z; // Declare 3 variables
|
||||
x = 5; // Assign the value 5 to x
|
||||
y = 6; // Assign the value 6 to y
|
||||
z = x + y; // Assign the sum of x and y to z
|
||||
|
||||
document.getElementById("demo").innerHTML = "The value of z is " + z + ".";
|
||||
```
|
||||
|
||||
```jsx
|
||||
function Video({ video }) {
|
||||
return (
|
||||
<div>
|
||||
<Thumbnail video={video} />
|
||||
<a href={video.url}>
|
||||
<h3>{video.title}</h3>
|
||||
<p>{video.description}</p>
|
||||
</a>
|
||||
<LikeButton video={video} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
```java
|
||||
public class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### K
|
||||
|
||||
```kotlin
|
||||
fun main() {
|
||||
println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
### L
|
||||
|
||||
```lua
|
||||
print("Hello, World!")
|
||||
```
|
||||
|
||||
### M
|
||||
|
||||
```matlab
|
||||
disp('Hello, World!')
|
||||
```
|
||||
|
||||
### N
|
||||
|
||||
```nim
|
||||
echo "Hello, World!"
|
||||
```
|
||||
|
||||
### O
|
||||
|
||||
```objectivec
|
||||
#import <Foundation/Foundation.h>
|
||||
int main() {
|
||||
@autoreleasepool {
|
||||
NSLog(@"Hello, World!");
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
### P
|
||||
|
||||
```perl
|
||||
print("Hello, World!\n");
|
||||
```
|
||||
|
||||
```php
|
||||
<?php echo "Hello, World!"; ?>
|
||||
```
|
||||
|
||||
```python
|
||||
print("Hello, World!")
|
||||
```
|
||||
|
||||
### R
|
||||
|
||||
```r
|
||||
cat("Hello, World!\n")
|
||||
```
|
||||
|
||||
```ruby
|
||||
puts "Hello, World!"
|
||||
```
|
||||
|
||||
```rust
|
||||
fn main() {
|
||||
println!("Hello, World!");
|
||||
}
|
||||
```
|
||||
|
||||
### S
|
||||
|
||||
```scala
|
||||
object HelloWorld extends App {
|
||||
println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
### T
|
||||
|
||||
```typescript
|
||||
console.log("Hello, World!");
|
||||
```
|
||||
|
||||
### V
|
||||
|
||||
```vlang
|
||||
fn main() {
|
||||
println('Hello, World!')
|
||||
}
|
||||
```
|
||||
|
||||
### Z
|
||||
|
||||
```zig
|
||||
const std = @import("std");
|
||||
pub fn main() !void {
|
||||
std.debug.print("Hello, World!\n", .{});
|
||||
}
|
||||
```
|
193
content/posts/showcase.de.md
Normal file
193
content/posts/showcase.de.md
Normal file
@@ -0,0 +1,193 @@
|
||||
+++
|
||||
author = "Hugo Autoren & Radek"
|
||||
title = "Beispielvorführung"
|
||||
date = "2025-04-09T07:01:12+02:00"
|
||||
description = "Beispielartikel, der grundlegendes Styling und Formatierungen für HTML-Elemente zeigt."
|
||||
tags = ['showcase', 'markdown', 'styling']
|
||||
+++
|
||||
|
||||
Dieser Artikel bietet ein Beispiel für grundlegende Markdown-Syntax, die in Hugo-Inhaltsdateien verwendet werden kann. Er zeigt auch, ob grundlegende HTML-Elemente mit CSS in einem Hugo-Theme dekoriert sind.
|
||||
<!--more-->
|
||||
|
||||
## Überschriften
|
||||
|
||||
Die folgenden HTML-Elemente `<h1>`—`<h6>` repräsentieren sechs Ebenen von Abschnittsüberschriften. `<h1>` ist die höchste Abschnittsebene, während `<h6>` die niedrigste ist.
|
||||
|
||||
# H1
|
||||
## H2
|
||||
### H3
|
||||
### H4
|
||||
#### H5
|
||||
##### H6
|
||||
|
||||
## Absatz
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## Bilder
|
||||
|
||||

|
||||
|
||||
### Abbildung mit Beschriftung
|
||||
|
||||
{{< figure src="/img/terminal-theme.png" alt="Terminal Theme Preview" position="center" caption="Terminal Theme Preview" captionPosition="center" >}}
|
||||
|
||||
## Zitate
|
||||
|
||||
Das Blockquote-Element stellt Inhalte dar, die aus einer anderen Quelle zitiert werden, optional mit einer Zitation, die innerhalb eines `footer`- oder `cite`-Elements enthalten sein muss, und optional mit Inline-Änderungen wie Anmerkungen und Abkürzungen.
|
||||
|
||||
### Blockquote ohne Attribution
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Beachte**, dass du *Markdown-Syntax* innerhalb eines Blockquotes verwenden kannst.
|
||||
|
||||
### Blockquote mit Attribution
|
||||
|
||||
> Kommuniziere nicht durch das Teilen von Speicher, teile Speicher durch Kommunizieren.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: Das obige Zitat stammt aus Rob Pikes [Vortrag](https://www.youtube.com/watch?v=PAAkCSZUG1c) während Gopherfest am 18. November 2015.
|
||||
|
||||
## Buttons und Links
|
||||
|
||||
<button>Button</button>
|
||||
<a href="">Link</a>
|
||||
<a href="" class="button inline">Link</a>
|
||||
|
||||
## Tabellen
|
||||
|
||||
Tabellen sind nicht Teil der Kern-Mardown-Spezifikation, aber Hugo unterstützt sie standardmäßig.
|
||||
|
||||
Name | Alter
|
||||
--------|------
|
||||
Bob | 27
|
||||
Alice | 23
|
||||
|
||||
### Inline Markdown innerhalb von Tabellen
|
||||
|
||||
| Kursiv | Fett | Code |
|
||||
| -------- | -------- | ------ |
|
||||
| *kursiv* | **fett** | `code` |
|
||||
|
||||
## Formulare
|
||||
|
||||
<fieldset>
|
||||
<input type="text" placeholder="Tippe etwas" /><br />
|
||||
<input type="number" placeholder="Zahl eingeben" /><br />
|
||||
<input type="text" value="Eingabewert" /><br />
|
||||
<select>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
</select><br />
|
||||
<textarea placeholder="Kommentar eingeben..."></textarea><br />
|
||||
<input type="checkbox" /> Ich verstehe<br />
|
||||
<button type="submit">Absenden</button>
|
||||
</fieldset>
|
||||
|
||||
## Code-Blöcke
|
||||
|
||||
### Code-Block mit Backticks
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Beispiel HTML5-Dokument</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Code-Block eingerückt mit vier Leerzeichen
|
||||
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Beispiel HTML5-Dokument</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### Code-Block mit Hugos internem Highlight-Shortcode
|
||||
|
||||
{{< highlight html >}}
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Beispiel HTML5-Dokument</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
### Code-Block mit benutzerdefiniertem eingebautem `{{ < code > }}` Shortcode
|
||||
|
||||
{{< code title="Hey, dies ist der Titel eines Code-Blocks" language="css" >}}
|
||||
pre {
|
||||
background: #1a1a1d;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
overflow: auto;
|
||||
|
||||
@media (--phone) {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
code {
|
||||
background: none !important;
|
||||
color: #ccc;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
{{< /code >}}
|
||||
|
||||
## Listenarten
|
||||
|
||||
### Geordnete Liste
|
||||
|
||||
1. Erstes Element
|
||||
2. Zweites Element
|
||||
3. Drittes Element
|
||||
|
||||
### Ungeordnete Liste
|
||||
|
||||
* Listenelement
|
||||
* Weiteres Element
|
||||
* Noch ein Element
|
||||
|
||||
### Verschachtelte Liste
|
||||
|
||||
* Obst
|
||||
* Apfel
|
||||
* Orange
|
||||
* Banane
|
||||
* Milchprodukte
|
||||
* Milch
|
||||
* Käse
|
||||
|
||||
## Andere Elemente — abbr, sub, sup, kbd, mark
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> ist ein Bitmap-Bildformat.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Drücke <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Entf</kbd>, um die Sitzung zu beenden.
|
||||
|
||||
Die meisten <mark>Salamander</mark> sind nachtaktiv und jagen nach Insekten, Würmern und anderen kleinen Lebewesen.
|
193
content/posts/showcase.en.md
Normal file
193
content/posts/showcase.en.md
Normal file
@@ -0,0 +1,193 @@
|
||||
+++
|
||||
author = "Hugo Authors & Radek"
|
||||
title = "Showcase"
|
||||
date = "2025-04-09T07:01:12+02:00"
|
||||
description = "Sample article showcasing basic styling and formatting for HTML elements."
|
||||
tags = ['showcase', 'markdown', 'styling']
|
||||
+++
|
||||
|
||||
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
|
||||
<!--more-->
|
||||
|
||||
## Headings
|
||||
|
||||
The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
|
||||
|
||||
# H1
|
||||
## H2
|
||||
### H3
|
||||
### H4
|
||||
#### H5
|
||||
##### H6
|
||||
|
||||
## Paragraph
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## Images
|
||||
|
||||

|
||||
|
||||
### Figure with a caption
|
||||
|
||||
{{< figure src="/img/terminal-theme.png" alt="Terminal Theme Preview" position="center" caption="Terminal Theme Preview" captionPosition="center" >}}
|
||||
|
||||
## Blockquotes
|
||||
|
||||
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
|
||||
|
||||
### Blockquote without attribution
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use *Markdown syntax* within a blockquote.
|
||||
|
||||
### Blockquote with attribution
|
||||
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||
|
||||
## Buttons and links
|
||||
|
||||
<button>Button</button>
|
||||
<a href="">Link</a>
|
||||
<a href="" class="button inline">Link</a>
|
||||
|
||||
## Tables
|
||||
|
||||
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
|
||||
|
||||
Name | Age
|
||||
--------|------
|
||||
Bob | 27
|
||||
Alice | 23
|
||||
|
||||
### Inline Markdown within tables
|
||||
|
||||
| Italics | Bold | Code |
|
||||
| -------- | -------- | ------ |
|
||||
| *italics* | **bold** | `code` |
|
||||
|
||||
## Forms
|
||||
|
||||
<fieldset>
|
||||
<input type="text" placeholder="Type something" /><br />
|
||||
<input type="number" placeholder="Insert number" /><br />
|
||||
<input type="text" value="Input value" /><br />
|
||||
<select>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
</select><br />
|
||||
<textarea placeholder="Insert a comment..."></textarea><br />
|
||||
<input type="checkbox" /> I understand<br />
|
||||
<button type="submi">Submit</button>
|
||||
</fieldset>
|
||||
|
||||
## Code Blocks
|
||||
|
||||
### Code block with backticks
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Code block indented with four spaces
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### Code block with Hugo's internal highlight shortcode
|
||||
|
||||
{{< highlight html >}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
### Code block with custom built-in `{{ < code > }}` shortcode
|
||||
|
||||
{{< code title="Hey, this is a code block title" language="css" >}}
|
||||
pre {
|
||||
background: #1a1a1d;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
overflow: auto;
|
||||
|
||||
@media (--phone) {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
code {
|
||||
background: none !important;
|
||||
color: #ccc;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
{{< /code >}}
|
||||
|
||||
## List Types
|
||||
|
||||
### Ordered List
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
### Unordered List
|
||||
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
|
||||
### Nested list
|
||||
|
||||
* Fruit
|
||||
* Apple
|
||||
* Orange
|
||||
* Banana
|
||||
* Dairy
|
||||
* Milk
|
||||
* Cheese
|
||||
|
||||
## Other Elements — abbr, sub, sup, kbd, mark
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
Reference in New Issue
Block a user