ndf-elements/src/templates/my-code.tpl.html

My collection of useful custom elements.

<!--
  Themes: https://unpkg.com/browse/rainbow-code@2.1.7/themes/css/
-->

<template>
  <link href="https://unpkg.com/rainbow-code@2.1.7/themes/css/pastie.css" rel="stylesheet" />
  <script src="https://unpkg.com/rainbow-code@2.1.7/dist/rainbow.min.js" crossorigin="" async></script>

  <style>
  details {
    margin: 1rem 0;
  }
  details > summary {
    background: var(--my-summary-background, LightYellow);
    border: var(--my-default-border, 1px solid #ddd);
    cursor: pointer;
    padding: 1px .3rem;
  }
  details > summary::marker {
    color: #11d;
    font-size: 1.5rem;
  }
  details[ open ] > summary {
    border-bottom: none;
  }

  /* Reduce animation-delay - set in pastie.css */
  pre [ data-language ],
  pre [ class ^= lang ] {
    animation-duration: 50ms; /* Was: 50ms */
    animation-delay: 500ms; /* Was: 2s */
  }
  </style>

  <details open >
    <summary> Code example (<small>HTML</small>) </summary>

    <pre><code class="language-XX" data-language="XX"><slot>console.debug('Hello world');</slot></code></pre>
  </details>
</template>

<!--
<link href="https://unpkg.com/prismjs@1/themes/prism.css" rel="stylesheet" />
<script type="XX">
  window.Prism = window.Prism || {};
  Prism.manual = true;
</script>
<script src="https://unpkg.com/prismjs@1/components/prism-core.min.js"></script>
<script XX_src="https://unpkg.com/prismjs@1/components/prism-markup.min.js"></script>
<script XX_src="https://unpkg.com/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
-->