code

An inline code block for code snippets and examples.

Preview

Default files

Snippet

<?php /** @var \Kirby\Cms\Block $block */ ?>
<pre><code class="language-<?= $block->language()->or('text') ?>"><?= $block->code()->html(false) ?></code></pre>

To overwrite this default snippet, place your custom file in /site/snippets/blocks/code.php.

Blueprint

name: field.blocks.code.name
icon: code
wysiwyg: true
preview: code
fields:
  code:
    label: field.blocks.code.name
    type: textarea
    placeholder: field.blocks.code.placeholder
    buttons: false
    font: monospace
  language:
    label: field.blocks.code.language
    type: select
    default: text
    options:
      bash: Bash
      basic: BASIC
      c: C
      clojure: Clojure
      cpp: C++
      csharp: C#
      css: CSS
      diff: Diff
      elixir: Elixir
      elm: Elm
      erlang: Erlang
      go: Go
      graphql: GraphQL
      haskell: Haskell
      html: HTML
      java: Java
      js: JavaScript
      json: JSON
      latext: LaTeX
      less: Less
      lisp: Lisp
      lua: Lua
      makefile: Makefile
      markdown: Markdown
      markup: Markup
      objectivec: Objective-C
      pascal: Pascal
      perl: Perl
      php: PHP
      text: Plain Text
      python: Python
      r: R
      ruby: Ruby
      rust: Rust
      sass: Sass
      scss: SCSS
      shell: Shell
      sql: SQL
      swift: Swift
      typescript: TypeScript
      vbnet: VB.net
      xml: XML
      yaml: YAML

To overwrite this default blueprint, place your custom file in /site/blueprints/blocks/code.yml.

Vue component

kirby/blob/main/panel/src/components/Forms/Blocks/Types/Code.vue