CodeBlock

CodeBlock shows code in a monospaced font with syntax highlighting for its language. It can show line numbers, scrolls long lines horizontally instead of wrapping by default, supports text selection, and shows the language name and a copy button at the top.

import { CodeBlock } from "onescript/views"

const source = `const greeting = "Hello"
console.log(greeting)`

<CodeBlock
  language="typescript"
  theme="github"
  showsLineNumbers
>
  {source}
</CodeBlock>

Themes

The theme provides the background and text colors; the block also has rounded corners and padding, which you can adjust with modifiers. The font size follows the font modifier and defaults to callout; the font is always monospaced.

Languages

Highlighting runs natively with highlight.js through Highlightr, the same engine that highlights code in Markdown. language must be one of these names; aliases such as ts, js, sh, or py are not accepted, and any other value throws an UNSUPPORTED_CODE_LANGUAGE error:

1c, abnf, accesslog, actionscript, ada, angelscript, apache, applescript, arcade, arduino, armasm, asciidoc, aspectj, autohotkey, autoit, avrasm, awk, axapta, bash, basic, bnf, brainfuck, c, cal, capnproto, ceylon, clean, clojure, clojure-repl, cmake, coffeescript, coq, cos, cpp, crmsh, crystal, csharp, csp, css, d, dart, delphi, diff, django, dns, dockerfile, dos, dsconfig, dts, dust, ebnf, elixir, elm, erb, erlang, erlang-repl, excel, fix, flix, fortran, fsharp, gams, gauss, gcode, gherkin, glsl, gml, go, golo, gradle, graphql, groovy, haml, handlebars, haskell, haxe, hsp, http, hy, inform7, ini, irpf90, isbl, java, javascript, jboss-cli, json, julia, julia-repl, kotlin, lasso, latex, ldif, leaf, less, lisp, livecodeserver, livescript, llvm, lsl, lua, makefile, markdown, mathematica, matlab, maxima, mel, mercury, mipsasm, mizar, mojolicious, monkey, moonscript, n1ql, nestedtext, nginx, nim, nix, node-repl, nsis, objectivec, ocaml, openscad, oxygene, parser3, perl, pf, pgsql, php, php-template, plaintext, pony, powershell, processing, profile, prolog, properties, protobuf, puppet, purebasic, python, python-repl, q, qml, r, reasonml, rib, roboconf, routeros, rsl, ruby, ruleslanguage, rust, sas, scala, scheme, scilab, scss, shell, smali, smalltalk, sml, sqf, sql, stan, stata, step21, stylus, subunit, swift, taggerscript, tap, tcl, thrift, tp, twig, typescript, vala, vbnet, vbscript, vbscript-html, verilog, vhdl, vim, wasm, wren, x86asm, xl, xml, xquery, yaml, zephir

TSX is highlighted as typescript, so JSX tags aren't colored separately.

Behavior

• Without wrapping, the whole block can be selected across lines. With wraps, lines are laid out one by one so line numbers stay aligned with wrapped lines, and selection works within a single line.
• Code is highlighted in the background. The first time a piece of code is shown it may briefly appear as plain text before the colors are applied.
• Only available in App and Action view sessions; widgets reject it with an unsupported view type error.