Oops! There was an issue with the sign in. Please try again.
You have successfully signed up. You can sign in now.
Oops! There was an issue with the sign up. Please try again.
You have successfully subscribed. Please check your email to confirm.
Oops! There was an issue subscribing. Please try again.
You have successfully signed up. You can sign in now.
Writing code tutorials

Writing code tutorials

Syntax Highlighting

CodeWire comes with Prism.js for syntax highlighting and supports all languages listed in the documentation.

The language field value will be set on the surrounding element of the code block so the syntax highlighter knows the language of the example code. You can also use the language field in the top right corner of the code block.

You can optionally display line numbers by adding line-numbers proceeded by a space to the language field.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello CodeWire!</title>
  </head>
  <body>
  <section class="section">
    <h1 class="title">
     Hello World
    </h1>
  </section>
  </body>
</html>
var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
fun dfs(graph: Graph) {
  fun dfs(current: Vertex, visited: MutableSet<Vertex>) {
    if (!visited.add(current)) return
    for (v in current.neighbors)
      dfs(v, visited)
  }

  dfs(graph.vertices[0], HashSet())
}
Optional caption text for the code sample
#!/bin/bash

echo 'How old are you?'
read age

if [ $age -gt 20 ]
then
    echo 'You can drive.'
else
    echo 'You are too young to drive.'
fi

Terminal Commands

The theme also supports different styles for terminal input and output.

echo "Hello, $(name)!"
Hello, CodeWire!