Thinkport

Lorem ipsum

Beispiel mit Tabs

main.tf

resource "lorem" "ipsum" {
  dolor = "sit"
  amet = "consetetur"
}

LoremIpsumDolor

main.tf

resource "lorem" "ipsum" {
  dolor = "sit"
  amet = "consetetur"
}

LoremIpsumDolor

index.ts

import * as lorem from "@lorem/ipsum";

const dolor = new lorem.ipsum("example", {
  sit: "amet",
  consetetur: "sadipscing"
});

LoremIpsumDolor

HTML Beispiel

Code im Default Slot

index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beispiel</title>
</head>
<body>
  <h1>Hallo Welt</h1>
  <p>Dies ist ein Beispiel für Code im Default Slot.</p>
</body>
</html>

HTMLWeb

CodeShowcase

Code-Beispiele mit Tabs

Die CodeShowcase-Komponente zeigt Code-Beispiele in verschiedenen Sprachen mit Tabs an. Sie eignet sich besonders für die Darstellung von Infrastructure as Code Beispielen.

Codebeispiel

<CodeShowcase
tagline="Lorem ipsum"
title="Dolor sit amet, consetetur sadipscing elitr"
languages={["Lorem", "Ipsum", "Dolor"]}
snippets={[
  {
    language: "Lorem",
    code: `resource "lorem" "ipsum" {
dolor = "sit"
amet = "consetetur"
}`,
    filename: "main.tf",
    tags: ["Lorem", "Ipsum", "Dolor"]
  },
  {
    language: "Ipsum",
    code: `import * as lorem from "@lorem/ipsum";

const dolor = new lorem.ipsum("example", {
sit: "amet",
consetetur: "sadipscing"
});`,
    filename: "index.ts",
    tags: ["Lorem", "Ipsum", "Dolor"]
  }
]}
wrap={false}
/>

Parameter

Bezeichner	Typ	Beschreibung	Default
title	string	Hauptüberschrift	-
tagline	string	Kleine Überschrift über dem Titel	-
languages	string[]	Array von Sprachen-Namen für Tabs	[]
snippets	array	Array von Code-Snippets mit language, code, filename, tags	[]
wrap	boolean	Code-Zeilen umbrechen	false

Wiki-Dokumentation Quellcode