Code blocks examples

The Astro Terminal theme uses Shiki as syntax highlighter, providing beautiful and customizable code highlighting with a monochrome theme that matches the terminal aesthetic.

Below you can see many basic presentations of the code blocks you can use depending on your needs.

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:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Programming Languages

A

Astro:

---
const greeting = "Hello, World!";
---
<h1>{greeting}</h1>

B

Bash:

echo "Hello, World!"

C

#include <stdio.h>
int main() {
    printf("Hello, World!\n");
    return 0;
}

C#:

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

Docker:

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]

E

Elixir:

IO.puts "Hello, World!"

Erlang:

-module(hello).
-export([world/0]).
world() -> io:format("Hello, World!~n").

F

F#:

printfn "Hello, World!"

G

Go:

package main
import "fmt"
func main() {
    fmt.Println("Hello, World!")
}

GraphQL:

type Query {
  hello: String!
}

query GetGreeting {
  hello
}

H

Haskell:

main = putStrLn "Hello, World!"

J

JavaScript:

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!");
    }
}

JSON:

{
  "message": "Hello, World!",
  "author": "Example",
  "version": 1.0
}

K

Kotlin:

fun main() {
    println("Hello, World!")
}

L

Lua:

print("Hello, World!")

M

Markdown:

# Hello, World!

This is a **markdown** example with:
- Lists
- **Bold** and *italic* text
- [Links](https://example.com)

MATLAB:

disp('Hello, World!')

N

Nim:

echo "Hello, World!"

O

Objective-C:

#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

cat("Hello, World!\n")

Ruby:

puts "Hello, World!"

Rust:

fn main() {
    println!("Hello, World!");
}

S

Scala:

object HelloWorld extends App {
  println("Hello, World!")
}

SQL:

SELECT 'Hello, World!' AS greeting;

CREATE TABLE messages (
    id INT PRIMARY KEY,
    text VARCHAR(255)
);

INSERT INTO messages (id, text) VALUES (1, 'Hello, World!');

Svelte:

<script>
  let greeting = 'Hello, World!';
</script>

<h1>{greeting}</h1>

<style>
  h1 {
    color: #00ff00;
  }
</style>

T

TOML:

[package]
name = "hello-world"
version = "1.0.0"

[dependencies]
astro = "^4.0.0"

TypeScript:

console.log("Hello, World!");

V

Vue:

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello, World!')
</script>

Y

YAML:

greeting: Hello, World!
author: Example
version: 1.0
features:
  - syntax-highlighting
  - code-blocks
  - astro-support

Z

Zig:

const std = @import("std");
pub fn main() !void {
    std.debug.print("Hello, World!\n", .{});
}

Read other posts

[Rich Content] >