menu

c3.js

open_in_new 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.css">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
<div id="chart"></div>
<script>
  var chart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ]
      }
  });
</script>

MathJax

open_in_new 
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
$$
  \begin{align}
    \hat{H}\psi &= E\psi\\
    \hat{H} &= -\frac{\hbar^2}{2m}\frac{\partial^2}{\partial x^2} + V(x)
  \end{align}
$$
$$ \begin{align} \hat{H}\psi &= E\psi\\ \hat{H} &= -\frac{\hbar^2}{2m}\frac{\partial^2}{\partial x^2} + V(x) \end{align} $$

Marked

open_in_new 
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>console.log(marked.parse('- a\n - b\n - c'));</script>
<textarea onInput='document.getElementById("markdown-output").value = marked.parse(this.value);'></textarea>
<textarea id="markdown-output"></textarea>

EasyMDE

open_in_new 
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<textarea id="my-text-area"></textarea>
<script>
var easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
</script>

popup.js

open_in_new 
<script src="https://cdn.jsdelivr.net/gh/ohno/popup.js@1.0.1/popup.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ohno/popup.js@1.0.1/popup.min.css">
<input id="popup-input" value="ここに書いてある文字列を表示します。">
<button onClick='popup(document.getElementById("popup-input").value);'>ポップアップ表示</button>

clipboard.js

open_in_new 
<script src="https://cdn.jsdelivr.net/npm/clipboard@latest/dist/clipboard.min.js"></script>
<input id="foo" value="ここに書いてある文字列をクリップボードにコピーします。">
<button class="btn" data-clipboard-target="#foo" onClick='popup("コピーしました")'>クリップボードにコピー</button>
<script>new ClipboardJS('.btn');</script>

download.js

open_in_new 
<script src="https://cdn.jsdelivr.net/gh/rndme/download@latest/download.min.js"></script>
<input id="download-input" value="ここに書いてある文字列をダウンロードします。">
<button onClick='download(document.getElementById("download-input").value, "download.txt", "text/plain");'>ダウンロード</button>

Material Icons

open_in_new 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">notifications</i>
<i class="material-icons">email</i>
<i class="material-icons">message</i>
<i class="material-icons">post_add</i>
<i class="material-icons">article</i>
<i class="material-icons">edit</i>
<i class="material-icons">delete</i>
<i class="material-icons">link</i>
<i class="material-icons">send</i>
<i class="material-icons">perm_identity</i>
<i class="material-icons">list</i>
<i class="material-icons">more_vert</i>
<i class="material-icons">account_circle</i>
<i class="material-icons">help</i>
<i class="material-icons">settings</i>
home search notifications email message post_add article edit delete link send perm_identity list more_vert account_circle help settings 

<script>
function clicked(obj) {
  if(obj.textContent==obj.getAttribute("before")) {
    obj.textContent=obj.getAttribute("after");
  }else{
    obj.textContent=obj.getAttribute("before");
  };
};
</script>
<a class="material-icons" onClick='clicked(this);' before="favorite_border" after="favorite">favorite_border</a>
<a class="material-icons" onClick='clicked(this);' before="bookmark_border" after="bookmark">bookmark_border</a>
<a class="material-icons" onClick='clicked(this);' before="menu" after="close">menu</a>
<a class="material-icons" onClick='clicked(this);' before="download" after="download_done">download</a>
<a class="material-icons" onClick='clicked(this);' before="cloud" after="cloud_off">cloud</a>
<a class="material-icons" onClick='clicked(this);' before="visibility" after="visibility_off">visibility</a>
<a class="material-icons" onClick='clicked(this);' before="play_circle" after="pause_circle">play_circle</a>
<a class="material-icons" onClick='clicked(this);' before="mic_none" after="mic_off">mic_none</a>
<a class="material-icons" onClick='clicked(this);' before="volume_up" after="volume_off">volume_up</a>
<a class="material-icons" onClick='clicked(this);' before="wifi" after="wifi_off">wifi</a>
menu settings check_box_outline_blank radio_button_unchecked toggle_on favorite_border bookmark_border wifi network_wifi network_cell download cloud link visibility play_arrow play_circle volume_up mic_none videocam

MoreToggles.css

open_in_new 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">
<div class="mt-ios"> 
  <input id="mt1" type="checkbox" checked="true"/>
  <label for="mt1"></label>
</div>

GitHub:buttons

open_in_new 
<script async defer src="https://buttons.github.io/buttons.js"></script>
<a class="github-button" href="https://github.com/ohno" aria-label="Follow @ohno on GitHub">Follow @ohno</a>
Follow @ohno

Shields.io

open_in_new 
<img alt="JavaScript" src="https://img.shields.io/badge/JavaScript-323330.svg?style=flat&logo=javascript&logoColor=F7DF1E"/>
JavaScript

highlight.js

open_in_new 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/styles/atom-one-dark.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<pre><code class="language-bash">#!/bin/sh

foo = 123
bar = 456
hoge = $foo + $bar
echo $hoge
</code></pre>
#!/bin/bash

foo = 123
bar = 456
hoge = $foo + $bar
echo $hoge

escape-html

open_in_new 
<script src="https://cdn.jsdelivr.net/gh/component/escape-html@latest/index.min.js"></script>
<textarea onInput='document.getElementById("escaped-html").value = escapeHtml(this.value);'></textarea>
<textarea id="escaped-html"></textarea>

mermaid.js

open_in_new 
<script src="https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-cli@8.13.3/mermaid.min.js"></script>
<div class="mermaid">
  graph TD;
  A-->|a| B;
  A-->|b| C;
  B-->|a'| D;
  C-->|b'| D;
</div>
graph TD; A-->|a| B; A-->|b| C; B-->|a'| D; C-->|b'| D;

Three.js

open_in_new 
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@latest/build/three.min.js"></script>
<script>
    let camera, scene, renderer;
    let geometry, material, mesh;

    init();

    function init() {
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
        camera.position.z = 1;

        scene = new THREE.Scene();

        geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
        material = new THREE.MeshNormalMaterial();

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setAnimationLoop( animation );
        document.body.appendChild( renderer.domElement );
    }

    function animation( time ) {
        mesh.rotation.x = time / 2000;
        mesh.rotation.y = time / 1000;

        renderer.render( scene, camera );
    }
</script>