Pattern Library by Cloudy knot

Code 

<main class="main-wrapper">
    <article class="article-container">
        <div class="code-highliter-prism">
            <span>hoge/fuga/index.html</span>
            <div class="code-toolbar">
                <pre class="language-html">
          <code class="language-html">
  &lt;title&gt;Introduction to The Mating Rituals of Bees&lt;/title&gt;
    ...
  &lt;h1 class="heading"&gt;Introduction&lt;/h1&gt;
  &lt;p&gt;This companion guide to the highly successful
    &lt;cite&gt;Introduction to Medieval Bee-Keeping&lt;/cite&gt;
    book is...
  &lt;/p&gt;</code>
        </pre>
                <div class="toolbar">
                    <div class="toolbar-item"><span class="file-name">HTML</span></div>
                </div>
            </div>
            <span>main.js</span>
            <div class="code-toolbar">
                <pre class="language-js">
          <code class="language-js">
  function $initHighlight(block, cls) {
    try {
      if (cls.search(/\bno\-highlight\b/) != -1) {
        return process(block, true, 0x0F) +` class="${cls}"`;
      }
    } catch (e) {
      /* handle exception */
    }
    for (var i = 0 / 2; i < classes.length; i++) {
      if (checkCondition(classes[i]) === undefined) {
        console.log('undefined');
      }
    }
    return ( &lt;div&gt; &lt;web-component&gt;{block}&lt;/web-component&gt; &lt;/div&gt; )
  }
  export $initHighlight;</code>
        </pre>
                <div class="toolbar">
                    <div class="toolbar-item"><span class="file-name">JavaScript</span>
                    </div>
                </div>
            </div>
    </article>
</main>

<script src="../../js/vendor/prism.js"></script>
 
<main class="main-wrapper">
  <article class="article-container">
    <div class="code-highliter-prism">
      <span>hoge/fuga/index.html</span>
      <div class="code-toolbar">
        <pre class="language-html">
          <code class="language-html">
  &lt;title&gt;Introduction to The Mating Rituals of Bees&lt;/title&gt;
    ...
  &lt;h1 class="heading"&gt;Introduction&lt;/h1&gt;
  &lt;p&gt;This companion guide to the highly successful
    &lt;cite&gt;Introduction to Medieval Bee-Keeping&lt;/cite&gt;
    book is...
  &lt;/p&gt;</code>
        </pre>
        <div class="toolbar">
          <div class="toolbar-item"><span class="file-name">HTML</span></div>
        </div>
      </div>
      <span>main.js</span>
      <div class="code-toolbar">
        <pre class="language-js">
          <code class="language-js">
  function $initHighlight(block, cls) {
    try {
      if (cls.search(/\bno\-highlight\b/) != -1) {
        return process(block, true, 0x0F) +` class="${cls}"`;
      }
    } catch (e) {
      /* handle exception */
    }
    for (var i = 0 / 2; i < classes.length; i++) {
      if (checkCondition(classes[i]) === undefined) {
        console.log('undefined');
      }
    }
    return ( &lt;div&gt; &lt;web-component&gt;{block}&lt;/web-component&gt; &lt;/div&gt; )
  }
  export $initHighlight;</code>
        </pre>
        <div class="toolbar">
          <div class="toolbar-item"><span class="file-name">JavaScript</span>
        </div>
      </div>
    </div>
  </article>
</main>

<script src="{{ path '/js/vendor/prism.js' }}"></script>
 
/* No context defined. */
  • Content: 
    /* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+bash+git+markup-templating+php+pug+python+ruby+scss+typescript&plugins=toolbar */
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/
code[class*="language-"],
pre[class*="language-"] {
  background: none;
  text-align: left;
  text-shadow: 0 1px hsla(0, 0%, 0%, .3);
  line-height: 1.5;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 1rem;
  hyphens: none;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  white-space: pre;
  color: #f8f8f2;
  tab-size: 4;
}
code[class*="language-"] *,
pre[class*="language-"] * {
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

/* Code blocks */
pre[class*="language-"] {
  margin: .5em 0;
  padding: 1em;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1rem .4rem .15rem;
  white-space: normal;
  border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #8292a2;
}

.token.punctuation {
  color: #f8f8f2;
}

.token.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.regex,
.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

div.code-toolbar {
  position: relative;
}

div.code-toolbar > .toolbar {
  position: absolute;
  top: .3em;
  right: .2em;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

div.code-toolbar:hover > .toolbar,
div.code-toolbar:focus > .toolbar {
  opacity: 1;
}

/* Separate line b/c rules are thrown out if selector is invalid.
  IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
  opacity: 1;
}

div.code-toolbar > .toolbar .toolbar-item {
  display: inline-block;
}

div.code-toolbar > .toolbar a {
  cursor: pointer;
}

div.code-toolbar > .toolbar button {
  padding: 0;
  border: 0;
  background: none;
  line-height: normal;
  font: inherit;
  color: inherit;
  overflow: visible;
  user-select: none;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
  padding: 0 .5em;
  background: #f5f2f0;
  background: rgba(224, 224, 224, .2);
  font-size: .8em;
  color: #bbb;
  border-radius: .5em;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, .2);
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
  text-decoration: none;
  color: inherit;
}

.code-highliter-prism span:not([class*="token"]):not([class="line-numbers-rows"]):not([class="file-name"]) {
  display: inline-block;
  padding: .2rem .8rem;
  background-color: var(--white);
  font-size: calc(var(--font-size-m1) - .02rem);
  font-weight: normal;
  color: #333;
}
.code-highliter-prism span:not([class*="token"]):not([class="line-numbers-rows"]):not([class="file-name"]):not(:first-of-type) {
  margin-top: 2rem;
}
.code-highliter-prism pre {
  margin-top: 0;
}
.code-highliter-prism code {
  font-size: calc(var(--font-size-m1) - .01rem);
}
@media print, screen and (min-width:48em) {
  .code-highliter-prism code {
    line-height: 1.6;
  }
}
@media print, screen and (max-width:47.96875em) {
  .code-highliter-prism code {
    line-height: 1.4;
    font-size: calc(var(--font-size-s1));
  }
}
  • URL: /components/raw/code/style.css
  • Filesystem Path: src/components/7-typography/code/style.css
  • Size: 4.2 KB

No notes defined.