<!-- head --> <link rel="stylesheet" href="{{site.katex}}/katex.min.css" /> <link rel="stylesheet" href="{{site.highlightjs}}/styles/monokai-sublime.min.css" /> <link rel="stylesheet" href="{{site.cdn}}{{site.version}}/quill.snow.css" /> <style> body > #standalone-container { margin: 50px auto; max-width: 720px; } #editor-container { height: 350px; } </style> <!-- head --> <div id="standalone-container"> <div id="toolbar-container"> <span class="ql-formats"> <select class="ql-font"></select> <select class="ql-size"></select> </span> <span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="ql-underline"></button> <button class="ql-strike"></button> </span> <span class="ql-formats"> <select class="ql-color"></select> <select class="ql-background"></select> </span> <span class="ql-formats"> <button class="ql-script" value="sub"></button> <button class="ql-script" value="super"></button> </span> <span class="ql-formats"> <button class="ql-header" value="1"></button> <button class="ql-header" value="2"></button> <button class="ql-blockquote"></button> <button class="ql-code-block"></button> </span> <span class="ql-formats"> <button class="ql-list" value="ordered"></button> <button class="ql-list" value="bullet"></button> <button class="ql-indent" value="-1"></button> <button class="ql-indent" value="+1"></button> </span> <span class="ql-formats"> <button class="ql-direction" value="rtl"></button> <select class="ql-align"></select> </span> <span class="ql-formats"> <button class="ql-link"></button> <button class="ql-image"></button> <button class="ql-video"></button> <button class="ql-formula"></button> </span> <span class="ql-formats"> <button class="ql-clean"></button> </span> </div> <div id="editor-container"></div> </div> <!-- script --> <script src="{{site.katex}}/katex.min.js"></script> <script src="{{site.highlightjs}}/highlight.min.js"></script> <script src="{{site.cdn}}{{site.version}}/{{site.quill}}"></script> <script> var quill = new Quill('#editor-container', { modules: { syntax: true, toolbar: '#toolbar-container', }, placeholder: 'Compose an epic...', theme: 'snow', }); </script> <!-- script -->