Skip to content

Kirby 5.0.1

code

An inline code block for code snippets and examples.

Preview

Default files

Snippet

By default, Kirby uses the following snippet to render the code block:

<?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

By default, Kirby uses the following blueprint for the code block:

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/src/components/Forms/Blocks/Types/Code.vue