Code Blocks

Portosaur uses Prism.js for syntax highlighting. We also provide extra functionality to highlight and annotate your code snippets effectively.

Magic Comments

You can use special comments inside your code blocks to highlight lines. These are commonly known as "Magic Comments".

Highlight Line

Highlight important parts of your code using // highlight-next-line. This highlights the line with a subtle accent background.

function greet() {
  // highlight-next-line
  console.log("This line is highlighted!");
  return true;
}

Highlight Block

You can highlight multiple lines at once by wrapping them in highlight-start and highlight-end comments.

function init() {
  console.log("Setting up...");
  // highlight-start
  startServer();
  connectDatabase();
  // highlight-end
  console.log("Ready!");
}

Error Line & Block

Show an incorrect or failing line of code by using // error-next-line. This highlights the line in red to indicate an error or bad practice.

function calculate() {
  // error-next-line
  let result = 1 / 0; // Division by zero
}

You can also highlight an entire block of error lines using // error-start and // error-end:

function calculate() {
  // error-start
  let x = 1;
  let y = 0;
  let result = x / y;
  // error-end
}

Success Line & Block

Highlight a successful or correct line of code using // success-next-line. This highlights the line in green.

function calculate() {
  // success-next-line
  let result = Number.MAX_VALUE; // Safe!
}