code-block-studio.md

Code Block Studio — language and retro examples

A fresh sample collection for Code Block Studio 1.7.3 or later: the main programming languages come first, followed by web, data, configuration and SQL. The retro computers and BBC display modes are grouped at the end.

Import this file into Joplin using File → Import → MD – Markdown (file), or paste its Markdown source into a new note. View the cards in Markdown preview or the Rich Text editor. The Markdown source editor remains a source view.

Try these controls

1. Choose Format to compare Original and Formatted. Many examples deliberately have untidy spacing. Cancel and the two Copy options leave the note unchanged; Apply formatting changes only that block. Use normal Undo to restore it.
2. Copy copies the original code without the toolbar or display line numbers. Wrap keeps long lines inside the card.
3. The machine-specific examples near the end start with Retro display ticked. Untick and retick it to compare the original-style screen with ordinary syntax highlighting. BBC blocks also have a display-mode selector.
4. In Rich Text, edit a code block and use the searchable Language field to change its language. After saving, try the Retro checkbox again. Leave different blocks on and off, then reopen the note to check their saved choices.

All highlighting and formatting happen locally; none of these examples is executed. The collection covers every supported formatter language or dialect, without repeating its aliases. Short labels such as py, js, c64, bbc, spectrum and amstrad work too.

Find a section

• Everyday programming and scripting
• Web languages and frameworks
• Data and configuration
• SQL and database dialects
• Retro computers and BASIC
• BBC Micro display modes

Everyday programming and scripting

Start here to try the main languages. PowerShell formatting targets PowerShell 7; Rust uses the 2021 edition.

Python

def greet( name ):
 return {"name":name,"items":[1,2,3]}

PowerShell

function Get-Greeting{
param([string]$Name)
Write-Output "Hello, $Name"
}

Bash

#!/bin/bash
if [ "$x" = y ];then echo "ok";else echo "no";fi

POSIX shell

for x in a b;do echo "$x";done

JavaScript

const greet=(name)=>{return {name:name,items:[1,2,3]}};

TypeScript

interface Person{name:string;age:number}
const greet=(person:Person):string=>{return `Hello ${person.name}`};

C

int main(){return 0;}

C++

#include <iostream>
int main(){std::cout<<"Hi";return 0;}

C#

class Example{static void Main(){System.Console.WriteLine("Hi");}}

Java

class Example{public static void main(String[] args){System.out.println("Hi");}}

Go

package main
func main(){println("hello")}

Rust

fn main(){let values=vec![1,2,3];println!("{:?}",values);}

Lua

local values={1,2,3}
for _,value in ipairs(values) do print(value) end

Dart

void main(){final names=["Ada","Leonard"];print(names.join(", "));}

PHP

<?php function greet($name){return "Hello ".$name;}

Objective-C

@interface Example:NSObject
-(void)hello;
@end

Protocol Buffers

syntax="proto3";message Example{string name=1;}

Web languages and frameworks

Try syntax highlighting, formatting and wrapping on markup, styles and components.

HTML

<section><h1>Code Block Studio</h1><p>Local formatting, with a preview.</p></section>

CSS

.card{color:#369;padding:8px 16px;margin:0 auto;}

SCSS

$accent:#369;.card{color:$accent;&:hover{color:white;}}

Less

@accent:#369;.card{color:@accent;&:hover{color:white;}}

React JSX

const Greeting=({name})=><section><h1>Hello {name}</h1><p>Welcome!</p></section>;

React TSX

const Greeting=({name}:{name:string})=><section><h1>Hello {name}</h1></section>;

Vue

<template><div>{{name}}</div></template>

Angular

<div>{{name}}</div>

Data and configuration

Structured data, documents and infrastructure configuration use their own explicit language labels.

JSON

{"name":"Code Block Studio","enabled":true,"items":[1,2,3]}

JSON with comments

// A comment that should survive formatting.
{"enabled":true,"items":[1,2,3]}

JSON5

{name:'Code Block Studio',enabled:true,items:[1,2,3,],}

YAML

name: Code Block Studio
items: [one,two,three]
settings: {enabled: true, count: 3}

XML

<root><item key="x">value</item></root>

TOML

# Configuration
name="example"
items=[1,2,3]

Markdown

# A small sample

*   First item
*   Second item with **bold** text

[Example](https://example.com)

GraphQL

query{user(id:1){id name}}

Dockerfile

from alpine:3.20
workdir /app
copy . .
run printf "Hello from Code Block Studio\n"

Terraform / OpenTofu

locals {
project="code-block-studio"
enabled=true
}

HCL

service "example" {
port=8080
tags=["local","demo"]
}

SQL and database dialects

Choose the dialect that matches your database. Formatting previews do not connect to a database or run queries.

SQL

select id,name from users where active=1 order by name;

PostgreSQL

select id,name from users where active=true limit 5;

MySQL

select `id`,`name` from `users` limit 5;

MariaDB

select `id`,`name` from `users` limit 5;

SQLite

select id,name from users limit 5;

SQL Server / T-SQL

select top 5 [id],[name] from [users];

BigQuery

select id,name from `project.dataset.users` limit 5;

Oracle / PL/SQL

select id,name from users where rownum<=5;

Snowflake

select id,name from users qualify row_number() over (order by id)=1;

DuckDB

select * from range(5);

Redshift

select top 5 id,name from users;

DB2

select id,name from users fetch first 5 rows only;

Hive

select id,name from users limit 5;

Retro computers and BASIC

The computer collection starts here. Machine-specific blocks have Retro display enabled, using their bundled fonts and screen palettes. Untick it for ordinary highlighting; tick it again to restore the screen. Both formatting comparison panes follow the selected display. Generic BASIC has no single machine profile.

These text listings keep their program numbers, case, statements, strings, comments and DATA. Formatting aligns program numbers and indents recognised blocks; it does not renumber or split lines. The display is a preset: MODE, VDU, INK and similar commands are not executed.

Generic BASIC

10 FOR I=1 TO 3
20 PRINT "HELLO";I
30 NEXT I
100 END

Commodore 64 — BASIC V2

10 REM COMMODORE DEMO
20 FOR I=1 TO 3
30 PRINT "HELLO";I
40 NEXT I
50 END

BBC Micro / Master — BBC BASIC

10 counter%=0
20 REPEAT
30 counter%=counter%+1
40 PRINT counter%
50 UNTIL counter%=3
60 END

ZX Spectrum — Sinclair BASIC

10 FOR n=1 TO 3
20 PRINT "HELLO ";n
30 NEXT n
40 STOP

Sinclair ZX81

ZX81 BASIC — black on white. The listing is uppercase, as on the original machine.

10 FOR N=1 TO 3
20 PRINT "HELLO, ZX81";N
30 NEXT N
40 STOP

Amstrad CPC — Locomotive BASIC

10 MODE 1
20 FOR i=1 TO 3
30 PRINT "HELLO";i
40 NEXT i
50 END

Apple II — Applesoft BASIC

10 HOME
20 FOR I=1 TO 3
30 PRINT "HELLO";I
40 NEXT I
50 END

Macintosh — Microsoft BASIC

Macintosh Microsoft BASIC — Monaco code font, Chicago caption, black on white.

10 FOR I=1 TO 3
20 PRINT "Hello, Macintosh!";I
30 NEXT I
40 END

Macintosh — QuickBASIC

Macintosh QuickBASIC — the same classic Macintosh screen, with structured BASIC layout.

FOR I=1 TO 3
IF I=2 THEN
PRINT "Hello, QuickBASIC!"
END IF
NEXT I

Atari 8-bit — Atari BASIC

10 GRAPHICS 0
20 FOR I=1 TO 3
30 PRINT "HELLO";I
40 NEXT I
50 END

Atari ST — STOS

Atari ST / STOS — ST low-resolution characters, white on black.

10 MODE 0
20 FOR I=1 TO 3
30 PRINT "HELLO, STOS!";I
40 NEXT I
50 END

Atari ST — GFA BASIC

Atari ST / GFA BASIC — ST characters with conservative structured layout.

FOR i=1 TO 3
IF i=2
PRINT "Hello, GFA BASIC!"
ENDIF
NEXT i

Amiga — AMOS

For I=1 To 3
Print "HELLO";I
Next I
End

MSX / MSX2 — MSX BASIC

MSX BASIC — international character set, white on the familiar TMS9918 blue.

10 SCREEN 0
20 COLOR 15,4,4
30 FOR I=1 TO 3
40 PRINT "HELLO, MSX!";I
50 NEXT I
60 END

Dragon 32 / 64

Dragon 32/64 BASIC — the original MC6847 character design, dark green on bright green. Lowercase codes in this font appear as inverse uppercase; the source and Copy output retain their original case.

10 CLS
20 FOR I=1 TO 3
30 PRINT "HELLO, DRAGON!";I
40 NEXT I
50 END

Acorn Archimedes — BBC BASIC V / VI

Acorn Archimedes / BBC BASIC V and VI — tall bitmap characters, white on black.

10 MODE 12
20 count%=0
30 REPEAT
40 count%=count%+1
50 PRINT "Hello, Archimedes! ";count%
60 UNTIL count%=3
70 END

Oric Atmos

Oric Atmos BASIC — black on white, including lowercase. Characters absent from the reproduction fall back visibly to the normal code font.

10 PAPER 7:INK 0:CLS
20 FOR I=1 TO 3
30 PRINT "Hello, Oric Atmos!";I
40 NEXT I
50 END

IBM PC — GW-BASIC

10 CLS
20 FOR I=1 TO 3
30 PRINT "HELLO";I
40 NEXT I
50 END

IBM PC — QBasic

FOR n=1 TO 3
IF n=2 THEN
PRINT "MIDDLE"
ELSE
PRINT n
END IF
NEXT n

BBC Micro display modes

The BBC display mode selector appears while Retro display is ticked. Its choice is saved per block, retained while Retro display is off, and used in the formatting comparison. Modes 3 and 6 have black inter-row gaps. Mode 6 includes blue and red screens with white text. These presets change character proportions and row spacing; they do not restrict line lengths or interpret commands. The repeated listing makes the differences easy to compare.

BBC Mode 0

10 MODE 0
20 FOR I=1 TO 3
30 PRINT "HELLO, BBC MICRO!";I
40 NEXT I
50 END

BBC Mode 1

10 MODE 1
20 FOR I=1 TO 3
30 PRINT "HELLO, BBC MICRO!";I
40 NEXT I
50 END

BBC Mode 2

10 MODE 2
20 FOR I=1 TO 3
30 PRINT "HELLO, BBC MICRO!";I
40 NEXT I
50 END

BBC Mode 3

10 MODE 3
20 FOR I=1 TO 3
30 PRINT "HELLO, BBC MICRO!";I
40 NEXT I
50 END

BBC Mode 4

10 MODE 4
20 FOR I=1 TO 3
30 PRINT "HELLO, BBC MICRO!";I
40 NEXT I
50 END

BBC Mode 5

10 MODE 5
20 FOR I=1 TO 3
30 PRINT "HELLO, BBC MICRO!";I
40 NEXT I
50 END

BBC Mode 6 — blue

10 MODE 6
15 VDU 19,0,4,0,0,0
20 FOR I=1 TO 3
30 PRINT "HELLO, BBC MICRO!";I
40 NEXT I
50 END

BBC Mode 6 — red

10 MODE 6
15 VDU 19,0,1,0,0,0
20 FOR I=1 TO 3
30 PRINT "HELLO, BBC MICRO!";I
40 NEXT I
50 END

BBC Mode 7

10 MODE 7
20 FOR I=1 TO 3
30 PRINT "HELLO, BBC MICRO!";I
40 NEXT I
50 END