Code Blocks

The fundamental building block of Code Hike is the code block. There are several ways to write code blocks inside markdown. The most common way is to wrap the code using triple backticks:

lorem.mdx

## Lorem ipsum
```
print("Hello, world!")
```
dolor **sit** amet

Syntax highlighting

If you specify a language after the ``` Code Hike will apply syntax highlighting to the code.

lorem.mdx

### Lorem ipsum
```python
print("Hello, world!")
```
dolor **sit** amet

Languages

Code Hike handles syntax highlighting for 134 languages: abap, actionscript-3, ada, apache, apex, apl, applescript, asm, astro, awk, ballerina, bat, berry, bibtex, bicep, c, clojure, cobol, codeql, coffee, cpp, crystal, csharp, css, cue, d, dart, diff, docker, dream-maker, elixir, elm, erb, erlang, fish, fsharp, gherkin, git-commit, git-rebase, gnuplot, go, graphql, groovy, hack, haml, handlebars, haskell, hcl, hlsl, html, ini, java, javascript, jinja-html, json, jsonc, jsonnet, jssm, jsx, julia, jupyter, kotlin, latex, less, lisp, logo, lua, make, markdown, marko, matlab, mdx, nginx, nim, nix, objective-c, objective-cpp, ocaml, pascal, perl, php, plsql, postcss, powershell, prisma, prolog, pug, puppet, purescript, python, r, raku, razor, rel, riscv, ruby, rust, sas, sass, scala, scheme, scss, shaderlab, shellscript, smalltalk, solidity, sparql, sql, ssh-config, stata, stylus, svelte, swift, system-verilog, tasl, tcl, tex, toml, tsx, turtle, twig, typescript, vb, verilog, vhdl, viml, vue-html, vue, wasm, wenyan, xml, xsl, yaml, and zenscript.

Most of the syntax highlighting is done using Shiki, so it should be possible to add more languages if you have the corresponding TextMate grammar.

Filename

If you add a title after the language, Code Hike will show a different UI featuring the filename:

lorem.mdx

### Lorem ipsum
```python hello.py
print("Hello, world!")
```
dolor **sit** amet