Code Blocks

Display code with syntax highlighting and more.

Basic Code Block

Use fenced code blocks by enclosing code in three backticks.

```java
System.out.println("Hello, World!");
```

Syntax Highlighting

Put the name of your programming language after the three backticks to get syntax highlighting.

We use Prism for syntax highlighting. Test Drive Prism lists all the languages supported.

System.out.println("Hello, World!");

Line Numbers, Highlights and Folds

Format: "=StartingLineNumber{HighlightLineNumber}[FoldingLineRanges]"

You can also select the lines in HackNote Editor, right-click, and choose “Code: Highlight” and “Code: Fold” from the context menu.

```java=3{7}[9-15]

renders as:

public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello, World!");
        greetUser();
    }
@@ 9,19 @@

    public static void greetUser() {
        Scanner scanner = new Scanner(System.in);
        System.out.print("Enter your name: ");
        System.out.println("Hello, " + scanner.nextLine() + "!");
        scanner.close();
    }

    public static void printHelloWorld() {
        System.out.println("Hello, World!");
    }
}

Named Code Block

You can assign a name and URL to your code block. When the screen viewport is wide enough, the named code blocks will be displayed in the sidebar.

Format: " [Name](URL)" (starting with a space)

```java=1{7}[9-16] [HelloWorld.java]

Code Block Reference

You can reference a line or a line range of a named code block by creating a link to the specific code block and line number(s).

```md
[L136](#C1_L136)
```

URL Format: "#CCodeBlockIndex_LLineNumber"

When the screen viewport is wide enough, the reference will render as a Xanadu link. For example, take a look at HelloWorld.java#L5-8.

import java.util.Scanner;

public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello, World!");
        greetUser();
    }
@@ 9,16 @@

    public static void greetUser() {
        Scanner scanner = new Scanner(System.in);
        System.out.print("Enter your name: ");
        System.out.println("Hello, " + scanner.nextLine() + "!");
        scanner.close();
    }

    public static void printHelloWorld() {
        System.out.println("Hello, World!");
    }
}

Hovering over the code reference link will display a beam that highlights the specified part of the code.

Try toggling the folding lines and hovering over the link again to see the dynamic positioning in action.

The positioning of code blocks on the sidebar depends on their first reference, ensuring that relevant contexts are adjacent to each other.

For example:

This is the first reference to the second code block, which should keep the position of HelloWorld2.java positioned nearby.

@@ 1,4 @@
import java.util.Scanner;

public class HelloWorld2 {

    public static void main(String[] args) {
        greet();
        personalizedGreeting();
    }
@@ 9,23 @@

    // Function to print "Hello, World!"
    public static void greet() {
        System.out.println("Hello, World!");
    }

    // Function to get the user's name and print a personalized greeting
    public static void personalizedGreeting() {
        Scanner scanner = new Scanner(System.in);
        System.out.print("Please enter your name: ");
        String name = scanner.nextLine();
        System.out.println("Welcome, " + name + "!");
        scanner.close();
    }
}