CodeBlock

CodeBlock 以等宽字体显示代码，并按语言进行语法高亮。可以显示行号，默认横向滚动、不自动换行，支持选择文字，顶部显示语言名和复制按钮。

import { CodeBlock } from "onescript/views"

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

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

主题

背景色与文字颜色由主题提供，圆角和内边距可以用修饰符调整。字号跟随 font 修饰符，默认为 callout，始终以等宽字体显示。

语言

高亮由 highlight.js 通过 Highlightr 在原生侧完成，与 Markdown 中代码块的高亮引擎相同。language 必须是以下名称之一；不接受 ts、js、sh、py 等别名，传入其他值会抛出 UNSUPPORTED_CODE_LANGUAGE 错误：

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 请使用 typescript 高亮，其中的 JSX 标签不会单独着色。

行为

• 不换行时整段代码可以跨行选择；开启 wraps 后逐行排版，以保证行号与折行对齐，只能在单行内选择。
• 高亮在后台完成，某段代码第一次显示时可能先短暂显示为纯文本，再上色。
• 仅在 App 和 Action 视图会话中可用；在 Widget 中使用会报「不支持的视图类型」错误。