Rendering Code Samples

A code sample contains HTML, CSS, and JS fields.

A bare code sample is defined with a theme hook and template.

code_sample.module

This just declares template variables.

function code_sample_theme(): array {
    'code_sample_bare' => [
        'title' => NULL,
        'html' => NULL,
        'css' => NULL,
        'js' => NULL,
    ],
}

code-sample-bare.html.twig

{{ css|raw }} and no indentation on the line renders the output for readability.

<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
    <style>
{{ css|raw }}
    </style>
  </head>
  <body>
{{ html|raw }}
    <script>
{{ js|raw }}
    </script>
  </body>
</html>

code_sample.routing.yml

entity.code_sample.bare:
  path: '/code-sample/{code_sample}/bare'
  defaults:
    _controller: '\Drupal\code_sample\Controller\CodeSampleController::buildBare'
  requirements:
    _permission: 'access content'
  options:
    parameters:
      code_sample:
        type: entity:code_sample

CodeSampleControlle.php

HtmlResponse renders plain html.

public function buildBare($code_sample) {
  $page = \Drupal::theme()->render(
    'code_sample_bare',
    [
      'title' => $code_sample->label(),
      'html' => $code_sample->html->value,
      'css' => $code_sample->css->value,
      'js' => $code_sample->js->value
    ]
  );

  return new HtmlResponse($page);
}
Project