Select language(s):
1.1.1970

Hallo Welt

Willkommen zu meinem ersten Blogeintrag! Wie in der Welt der Programmierung und der Erstellung digitaler Inhalte üblich, beginne ich mit einem obligatorischen "Hello, World!"-Artikel. Aber dies ist nicht wirklich eine Einführung. Vielmehr dient dieser Artikel dazu, Formatierung, Typografie und Funktionen wie Codehervorhebung oder Einbettung zu demonstrieren, hauptsächlich zu meiner eigenen Bequemlichkeit. Schaue dir also lieber einen anderen Artikel auf dem Blog an.

Vielleicht fällt dir auch die Funktion der geteilten Ansicht auf. Sie zeigt den Inhalt nebeneinander in verschiedenen Sprachen an, wobei jeder Absatz vertikal mit der Übersetzung beginnt. Dies ist ein Experiment, mit dem untersucht wird, ob dieses Layout zum Erlernen einer Sprache verwendet werden kann. Es wurde mit dem CSS-Untergitter und der Inhaltsfunktion erstellt.

Im weiteren Verlauf dieses Beitrags werden verschiedene Elemente und Formatierungen vorgestellt. Dies ist ein lebendiger Beitrag, der laufend aktualisiert wird.

Formatierung Showcase

Links & Listen

  1. Erste
  2. Zweite

Code-Blöcke mit Syntax-Hervorhebung

Hier ist ein "Inline"-Stück Code und ein Code-Block:

let processor = unified()
    .use(remarkParse)      // in einen Markdown-Syntaxbaum parsen
    .use(remarkRehype)     // in einen HTML-Syntaxbaum umwandeln
    .use(highlight)        // fügt Klassen für die Syntaxhervorhebung von Codeblöcken hinzu
    .use(rehypeStringify)  // wandelt den HTML-Syntaxbaum in HTML um

// Die process-Funktion gibt den erzeugten HTML-String zurück.
function processFile(filename) {
    // Liest die Datei mit vfile ein; man könnte auch fs verwenden, wenn man möchte.
    return processor.processSync(vfile.readSync(filename));
}

/// file: svelte.config.js
import adapter from '@sveltejs/adapter-node';

export default {
	kit: {
-		adapter: adapter()
+		adapter: adapter({ out: 'mein-ausgabe-verzeichnis' })
	}
};

Erheiternde Randbemerkung, am 01.01.1970 wurde die Zeit erfunden:

https://de.wikipedia.org/wiki/Unixzeit

Wunderschöne Flagge
Wunderschöne Flagge

GFM

www.example.com, https://example.com, and contact@example.com.

Fußnote

Eine Notiz1

Durchgestrichen

eins oder zwei Tilden.

Eine Tabelle mit verschiedenen Textausrichtungen

NormalLinksRechtsZentriert
1234

Aufgabenliste

  • aufgabe
  • erledigt

Ein größere Tabelle mit Harry-Potter-Figuren

Figuren mit einem anderen Namen im Englischen sind fett markiert.

GryffindorHufflepuffRavenclawSlytherinLehrerMuggel
Harry PotterCedric DiggoryLuna LovegoodDraco MalfoyAlbus DumbledoreVernon Dursley
Hermine GrangerNymphadora TonksCho ChangSeverus SnapeMinerva McGonagallPetunia Dursley
Ron WeasleyPomona SproutFilius FlitwickPansy ParkinsonSeverus SnapeDudley Dursley
Neville LongbottomNewt ScamanderGilderoy LockhartBlaise ZabiniRubeus HagridMarge Dursley
Ginny WeasleyErnie MacmillanSybill TrelawneyHorace SlughornDolores UmbridgeHerr Granger
Sirius BlackHannah AbbottMarietta EdgecombeRegulus BlackRemus LupinFrau Granger
James PotterJustin Finch-FletchleyMichael CornerTom RiddleGilderoy LockhartMrs. Figg
Lily PotterBellatrix LestrangeHorace SlughornKathrin Fricke

Footnotes

  1. Große Notiz. ↩

Found a typo? Edit on GitHub

1/1/1970

Hello World

Welcome to my first blog post! As is tradition in the world of programming and digital content creation, I am kicking things off with a mandatory "Hello, World!" article. But this isn't really an introduction. Rather, this post serves to demonstrate formatting, typography, and features like code highlighting or embeds, mostly for my own convenience. So rather check out any other article on the blog.

You might also notice the split view language feature. It presents the content side by side in different languages while each paragraph start vertically aligned with the translation. This is an experiment that explores if this layout could be used for learning a language. It's build with the CSS subgrid and content feature.

The rest of this post will demonstrate different elements and formatting. This is a living post, work-in-progress and will be updated continuously.

Formatting Showcase

Links & Lists

  1. First
  2. Second

Code Blocks with Syntax Highlighting

Here is an inline piece of code and a code block:

let processor = unified()
    .use(remarkParse)    // parse into markdown syntax tree
    .use(remarkRehype)  // convert to html syntax tree
    .use(highlight) // adds class for syntax highlighting code blocks
    .use(rehypeStringify)      // turn html syntax tree to html

// process function will return the generated html string.
function processFile(filename) {
    // use vfile to read the file, could use fs if you like.
    return processor.processSync(vfile.readSync(filename));
}

/// file: svelte.config.js
import adapter from '@sveltejs/adapter-node';

export default {
	kit: {
-		adapter: adapter()
+		adapter: adapter({ out: 'my-output-directory' })
	}
};

Fun fact, on Jan 1st, 1970 time was invented:

https://en.wikipedia.org/wiki/Unix_time

Beautiful flag
Beautiful flag

GFM

www.example.com, https://example.com, and contact@example.com.

Footnote

A note1

Strikethrough

one or two tildes.

A Table with different text-alignments

NormalLeftRightCentered
1234

Tasklist

  • to do
  • done

A Bigger Table With Harry Potter Characters

Characters with a different name in German are marked bold.

GryffindorHufflepuffRavenclawSlytherinTeachersMuggles
Harry PotterCedric DiggoryLuna LovegoodDraco MalfoyAlbus DumbledoreVernon Dursley
Hermione GrangerNymphadora TonksCho ChangSeverus SnapeMinerva McGonagallPetunia Dursley
Ron WeasleyPomona SproutFilius FlitwickPansy ParkinsonSeverus SnapeDudley Dursley
Neville LongbottomNewt ScamanderGilderoy LockhartBlaise ZabiniRubeus HagridMarge Dursley
Ginny WeasleyErnie MacmillanSybill TrelawneyHorace SlughornDolores UmbridgeMr. Granger
Sirius BlackHannah AbbottMarietta EdgecombeRegulus BlackRemus LupinMrs. Granger
James PotterJustin Finch-FletchleyMichael CornerTom RiddleGilderoy LockhartMrs. Figg
Lily PotterBellatrix LestrangeHorace SlughornColdmirror

Footnotes

  1. Big note. ↩

Found a typo? Edit on GitHub