diff options
| -rw-r--r-- | blog/views.py | 2 | ||||
| -rw-r--r-- | static/css/styles.css | 4 | ||||
| -rw-r--r-- | static/js/editor-theme.js | 682 | ||||
| -rw-r--r-- | templates/blog_admin/edit_post.html | 360 |
4 files changed, 867 insertions, 181 deletions
diff --git a/blog/views.py b/blog/views.py index f1966994..e2dd28f5 100644 --- a/blog/views.py +++ b/blog/views.py @@ -158,7 +158,7 @@ def post(request, slug): # code stored in .ql-syntax class soup = BeautifulSoup(post.body, 'html.parser') - code_blocks = soup.find_all('pre', class_='ql-syntax') + code_blocks = soup.find_all('pre') for code_block in code_blocks: data_language = code_block.get('data-language') if data_language == 'true': diff --git a/static/css/styles.css b/static/css/styles.css index 326148c5..87149669 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -410,6 +410,10 @@ blockquote { max-width: 710px; } +#preview img.block { + max-width: 100%; +} + #article-body h2, #article-body h1, #editor-container h2, diff --git a/static/js/editor-theme.js b/static/js/editor-theme.js new file mode 100644 index 00000000..0a2772f1 --- /dev/null +++ b/static/js/editor-theme.js @@ -0,0 +1,682 @@ +const themeData = { + base: "vs-dark", + inherit: true, + rules: [ + { + background: "011627", + token: "", + }, + { + foreground: "637777", + token: "comment", + }, + { + foreground: "addb67", + token: "string", + }, + { + foreground: "ecc48d", + token: "vstring.quoted", + }, + { + foreground: "ecc48d", + token: "variable.other.readwrite.js", + }, + { + foreground: "5ca7e4", + token: "string.regexp", + }, + { + foreground: "5ca7e4", + token: "string.regexp keyword.other", + }, + { + foreground: "5f7e97", + token: "meta.function punctuation.separator.comma", + }, + { + foreground: "f78c6c", + token: "constant.numeric", + }, + { + foreground: "f78c6c", + token: "constant.character.numeric", + }, + { + foreground: "addb67", + token: "variable", + }, + { + foreground: "c792ea", + token: "keyword", + }, + { + foreground: "c792ea", + token: "punctuation.accessor", + }, + { + foreground: "c792ea", + token: "storage", + }, + { + foreground: "c792ea", + token: "meta.var.expr", + }, + { + foreground: "c792ea", + token: + "meta.class meta.method.declaration meta.var.expr storage.type.jsm", + }, + { + foreground: "c792ea", + token: "storage.type.property.js", + }, + { + foreground: "c792ea", + token: "storage.type.property.ts", + }, + { + foreground: "c792ea", + token: "storage.type.property.tsx", + }, + { + foreground: "82aaff", + token: "storage.type", + }, + { + foreground: "ffcb8b", + token: "entity.name.class", + }, + { + foreground: "ffcb8b", + token: "meta.class entity.name.type.class", + }, + { + foreground: "addb67", + token: "entity.other.inherited-class", + }, + { + foreground: "82aaff", + token: "entity.name.function", + }, + { + foreground: "addb67", + token: "punctuation.definition.variable", + }, + { + foreground: "d3423e", + token: "punctuation.section.embedded", + }, + { + foreground: "d6deeb", + token: "punctuation.terminator.expression", + }, + { + foreground: "d6deeb", + token: "punctuation.definition.arguments", + }, + { + foreground: "d6deeb", + token: "punctuation.definition.array", + }, + { + foreground: "d6deeb", + token: "punctuation.section.array", + }, + { + foreground: "d6deeb", + token: "meta.array", + }, + { + foreground: "d9f5dd", + token: "punctuation.definition.list.begin", + }, + { + foreground: "d9f5dd", + token: "punctuation.definition.list.end", + }, + { + foreground: "d9f5dd", + token: "punctuation.separator.arguments", + }, + { + foreground: "d9f5dd", + token: "punctuation.definition.list", + }, + { + foreground: "d3423e", + token: "string.template meta.template.expression", + }, + { + foreground: "d6deeb", + token: "string.template punctuation.definition.string", + }, + { + foreground: "c792ea", + fontStyle: "italic", + token: "italic", + }, + { + foreground: "addb67", + fontStyle: "bold", + token: "bold", + }, + { + foreground: "82aaff", + token: "constant.language", + }, + { + foreground: "82aaff", + token: "punctuation.definition.constant", + }, + { + foreground: "82aaff", + token: "variable.other.constant", + }, + { + foreground: "7fdbca", + token: "support.function.construct", + }, + { + foreground: "7fdbca", + token: "keyword.other.new", + }, + { + foreground: "82aaff", + token: "constant.character", + }, + { + foreground: "82aaff", + token: "constant.other", + }, + { + foreground: "f78c6c", + token: "constant.character.escape", + }, + { + foreground: "addb67", + token: "entity.other.inherited-class", + }, + { + foreground: "d7dbe0", + token: "variable.parameter", + }, + { + foreground: "7fdbca", + token: "entity.name.tag", + }, + { + foreground: "cc2996", + token: "punctuation.definition.tag.html", + }, + { + foreground: "cc2996", + token: "punctuation.definition.tag.begin", + }, + { + foreground: "cc2996", + token: "punctuation.definition.tag.end", + }, + { + foreground: "addb67", + token: "entity.other.attribute-name", + }, + { + foreground: "addb67", + token: "entity.name.tag.custom", + }, + { + foreground: "82aaff", + token: "support.function", + }, + { + foreground: "82aaff", + token: "support.constant", + }, + { + foreground: "7fdbca", + token: "upport.constant.meta.property-value", + }, + { + foreground: "addb67", + token: "support.type", + }, + { + foreground: "addb67", + token: "support.class", + }, + { + foreground: "addb67", + token: "support.variable.dom", + }, + { + foreground: "7fdbca", + token: "support.constant", + }, + { + foreground: "7fdbca", + token: "keyword.other.special-method", + }, + { + foreground: "7fdbca", + token: "keyword.other.new", + }, + { + foreground: "7fdbca", + token: "keyword.other.debugger", + }, + { + foreground: "7fdbca", + token: "keyword.control", + }, + { + foreground: "c792ea", + token: "keyword.operator.comparison", + }, + { + foreground: "c792ea", + token: "keyword.control.flow.js", + }, + { + foreground: "c792ea", + token: "keyword.control.flow.ts", + }, + { + foreground: "c792ea", + token: "keyword.control.flow.tsx", + }, + { + foreground: "c792ea", + token: "keyword.control.ruby", + }, + { + foreground: "c792ea", + token: "keyword.control.module.ruby", + }, + { + foreground: "c792ea", + token: "keyword.control.class.ruby", + }, + { + foreground: "c792ea", + token: "keyword.control.def.ruby", + }, + { + foreground: "c792ea", + token: "keyword.control.loop.js", + }, + { + foreground: "c792ea", + token: "keyword.control.loop.ts", + }, + { + foreground: "c792ea", + token: "keyword.control.import.js", + }, + { + foreground: "c792ea", + token: "keyword.control.import.ts", + }, + { + foreground: "c792ea", + token: "keyword.control.import.tsx", + }, + { + foreground: "c792ea", + token: "keyword.control.from.js", + }, + { + foreground: "c792ea", + token: "keyword.control.from.ts", + }, + { + foreground: "c792ea", + token: "keyword.control.from.tsx", + }, + { + foreground: "ffffff", + background: "ff2c83", + token: "invalid", + }, + { + foreground: "ffffff", + background: "d3423e", + token: "invalid.deprecated", + }, + { + foreground: "7fdbca", + token: "keyword.operator", + }, + { + foreground: "c792ea", + token: "keyword.operator.relational", + }, + { + foreground: "c792ea", + token: "keyword.operator.assignement", + }, + { + foreground: "c792ea", + token: "keyword.operator.arithmetic", + }, + { + foreground: "c792ea", + token: "keyword.operator.bitwise", + }, + { + foreground: "c792ea", + token: "keyword.operator.increment", + }, + { + foreground: "c792ea", + token: "keyword.operator.ternary", + }, + { + foreground: "637777", + token: "comment.line.double-slash", + }, + { + foreground: "cdebf7", + token: "object", + }, + { + foreground: "ff5874", + token: "constant.language.null", + }, + { + foreground: "d6deeb", + token: "meta.brace", + }, + { + foreground: "c792ea", + token: "meta.delimiter.period", + }, + { + foreground: "d9f5dd", + token: "punctuation.definition.string", + }, + { + foreground: "ff5874", + token: "constant.language.boolean", + }, + { + foreground: "ffffff", + token: "object.comma", + }, + { + foreground: "7fdbca", + token: "variable.parameter.function", + }, + { + foreground: "80cbc4", + token: "support.type.vendor.property-name", + }, + { + foreground: "80cbc4", + token: "support.constant.vendor.property-value", + }, + { + foreground: "80cbc4", + token: "support.type.property-name", + }, + { + foreground: "80cbc4", + token: "meta.property-list entity.name.tag", + }, + { + foreground: "57eaf1", + token: "meta.property-list entity.name.tag.reference", + }, + { + foreground: "f78c6c", + token: "constant.other.color.rgb-value punctuation.definition.constant", + }, + { + foreground: "ffeb95", + token: "constant.other.color", + }, + { + foreground: "ffeb95", + token: "keyword.other.unit", + }, + { + foreground: "c792ea", + token: "meta.selector", + }, + { + foreground: "fad430", + token: "entity.other.attribute-name.id", + }, + { + foreground: "80cbc4", + token: "meta.property-name", + }, + { + foreground: "c792ea", + token: "entity.name.tag.doctype", + }, + { + foreground: "c792ea", + token: "meta.tag.sgml.doctype", + }, + { + foreground: "d9f5dd", + token: "punctuation.definition.parameters", + }, + { + foreground: "ecc48d", + token: "string.quoted", + }, + { + foreground: "ecc48d", + token: "string.quoted.double", + }, + { + foreground: "ecc48d", + token: "string.quoted.single", + }, + { + foreground: "addb67", + token: "support.constant.math", + }, + { + foreground: "addb67", + token: "support.type.property-name.json", + }, + { + foreground: "addb67", + token: "support.constant.json", + }, + { + foreground: "c789d6", + token: "meta.structure.dictionary.value.json string.quoted.double", + }, + { + foreground: "80cbc4", + token: "string.quoted.double.json punctuation.definition.string.json", + }, + { + foreground: "ff5874", + token: + "meta.structure.dictionary.json meta.structure.dictionary.value constant.language", + }, + { + foreground: "d6deeb", + token: "variable.other.ruby", + }, + { + foreground: "ecc48d", + token: "entity.name.type.class.ruby", + }, + { + foreground: "ecc48d", + token: "keyword.control.class.ruby", + }, + { + foreground: "ecc48d", + token: "meta.class.ruby", + }, + { + foreground: "7fdbca", + token: "constant.language.symbol.hashkey.ruby", + }, + { + foreground: "e0eddd", + background: "a57706", + fontStyle: "italic", + token: "meta.diff", + }, + { + foreground: "e0eddd", + background: "a57706", + fontStyle: "italic", + token: "meta.diff.header", + }, + { + foreground: "ef535090", + fontStyle: "italic", + token: "markup.deleted", + }, + { + foreground: "a2bffc", + fontStyle: "italic", + token: "markup.changed", + }, + { + foreground: "a2bffc", + fontStyle: "italic", + token: "meta.diff.header.git", + }, + { + foreground: "a2bffc", + fontStyle: "italic", + token: "meta.diff.header.from-file", + }, + { + foreground: "a2bffc", + fontStyle: "italic", + token: "meta.diff.header.to-file", + }, + { + foreground: "219186", + background: "eae3ca", + token: "markup.inserted", + }, + { + foreground: "d3201f", + token: "other.package.exclude", + }, + { + foreground: "d3201f", + token: "other.remove", + }, + { + foreground: "269186", + token: "other.add", + }, + { + foreground: "ff5874", + token: "constant.language.python", + }, + { + foreground: "82aaff", + token: "variable.parameter.function.python", + }, + { + foreground: "82aaff", + token: "meta.function-call.arguments.python", + }, + { + foreground: "b2ccd6", + token: "meta.function-call.python", + }, + { + foreground: "b2ccd6", + token: "meta.function-call.generic.python", + }, + { + foreground: "d6deeb", + token: "punctuation.python", + }, + { + foreground: "addb67", + token: "entity.name.function.decorator.python", + }, + { + foreground: "8eace3", + token: "source.python variable.language.special", + }, + { + foreground: "82b1ff", + token: "markup.heading.markdown", + }, + { + foreground: "c792ea", + fontStyle: "italic", + token: "markup.italic.markdown", + }, + { + foreground: "addb67", + fontStyle: "bold", + token: "markup.bold.markdown", + }, + { + foreground: "697098", + token: "markup.quote.markdown", + }, + { + foreground: "80cbc4", + token: "markup.inline.raw.markdown", + }, + { + foreground: "ff869a", + token: "markup.underline.link.markdown", + }, + { + foreground: "ff869a", + token: "markup.underline.link.image.markdown", + }, + { + foreground: "d6deeb", + token: "string.other.link.title.markdown", + }, + { + foreground: "d6deeb", + token: "string.other.link.description.markdown", + }, + { + foreground: "82b1ff", + token: "punctuation.definition.string.markdown", + }, + { + foreground: "82b1ff", + token: "punctuation.definition.string.begin.markdown", + }, + { + foreground: "82b1ff", + token: "punctuation.definition.string.end.markdown", + }, + { + foreground: "82b1ff", + token: "meta.link.inline.markdown punctuation.definition.string", + }, + { + foreground: "7fdbca", + token: "punctuation.definition.metadata.markdown", + }, + { + foreground: "82b1ff", + token: "beginning.punctuation.definition.list.markdown", + }, + ], + colors: { + "editor.foreground": "#d6deeb", + "editor.background": "#011627", + "editor.selectionBackground": "#5f7e9779", + "editor.lineHighlightBackground": "#010E17", + "editorCursor.foreground": "#80a4c2", + "editorWhitespace.foreground": "#2e2040", + "editorIndentGuide.background": "#5e81ce52", + "editor.selectionHighlightBorder": "#122d42", + }, +}; diff --git a/templates/blog_admin/edit_post.html b/templates/blog_admin/edit_post.html index ae17ff9d..ecef6a0a 100644 --- a/templates/blog_admin/edit_post.html +++ b/templates/blog_admin/edit_post.html @@ -1,202 +1,202 @@ -{% extends 'blog/partials/base.html' %} {% block content %} {% load static %} -<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" /> -<style> - button { - color: #444; - } - textarea#body { - margin: 10px 0 0 0; - width: 710px; - height: 400px; - } -</style> +{% extends 'blog/partials/base.html' %} {% load static %} {% block content %} +<link + rel="stylesheet" + href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/editor/editor.main.min.css" +/> <h1>Editing Post: {{ post.title }}</h1> -<div style="max-width: 730px"> - <div id="toolbar-container"> - <span class="ql-formats"> - <button class="ql-header" value="1"></button> - <button class="ql-header" value="2"></button> - </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"> - <button class="ql-blockquote"></button> - <button class="ql-code-block"></button> - </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-list" value="ordered"></button> - <button class="ql-list" value="bullet"></button> - </span> - <span class="ql-formats"> - <select class="ql-align"></select> - </span> - <span class="ql-formats"> - <button class="ql-link"></button> - <button class="ql-image"></button> - </span> - <span class="ql-formats"> - <button class="ql-clean"></button> - <button class="ql-html" onclick="toggleHTML()">HTML</button> - </span> +<div id="post-actions-bar" class="mtsbitem" style="width: 730px"> + <a class="pa-btn" href="javascript:toggleArea('editor');">Code</a> + <a class="pa-btn" href="javascript:toggleArea('preview');">Preview</a> + <a class="pa-btn" href="javascript:addImage('block');">Image (Block)</a> + <a class="pa-btn" href="javascript:addImage('inline');">Image (Inline)</a> +</div> +<div + id="edit-area" + style=" + border-bottom: solid 1px #311b4f; + border-left: solid 1px #311b4f; + border-right: solid 1px #311b4f; + " +> + <div id="editor" style="width: 730px;"></div> + <div id="article-body" style="width: 730px;"> + <div id="preview" style="padding: 1px 10px;"></div> </div> - <div id="editor-container"></div> - <form action="{% url 'blog-admin:edit-post' post.slug %}" method="post"> - {% csrf_token %} - <div style="display: none" id="HTMLContent"> - <textarea name="body" id="body">{{ post.body }}</textarea> - </div> - <br /> - <button type="submit" class="button button-special">Save</button> - </form> </div> -{% endblock %} {% block scripts %} -<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script> +<div style="padding: 20px 0"> + <button type="submit" class="button button-special" onclick="savePost()"> + Save + </button> +</div> +{% endblock content %} {% block scripts %} +<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/loader.js"></script> +<script src="{% static 'js/editor-theme.js' %}"></script> <script> - const Delta = Quill.import("delta"); - let BlockEmbed = Quill.import("blots/block/embed"); + const postBody = `{{ post.body|safe }}`; + var editorInstance; - class ImageBlock extends BlockEmbed { - static create(value) { - let node = super.create(); - node.setAttribute("src", value.url); + // default loads + $("#editor").css("min-height", $(window).height() + "px"); + toggleArea("preview"); + updatePreview(postBody); - if (value.size == "block") { - node.classList.add("block"); + function toggleArea(areaName) { + areas = ["editor", "preview"]; + const currentArea = areas.find((area) => { + return $(`#${area}`).is(":visible"); + }); + if (currentArea == areaName) { + return; + } + + $(`#${areaName}`).toggle(); + $(`#${areaName}`).promise().done(function() { + if ($(`#${areaName}`).is(":visible")) { + areas.forEach((area) => { + if (area != areaName) { + $(`#${area}`).hide(); + } + }); } + }); + } - return node; - } + function updatePreview(HTMLContent) { + $("#preview").html(HTMLContent); + } - static value(node) { - return { - url: node.getAttribute("src"), - }; - } + function savePost() { - html() { - const { url } = this.value(); - return `<img src="${url}">`; - } + const editor = monaco.editor.getModels()[0]; + const body = editor.getValue(); + const formURL = "{% url 'blog-admin:edit-post' post.slug %}"; + const csrfToken = "{{ csrf_token }}"; + + const form = document.createElement("form"); + form.setAttribute("action", formURL); + form.setAttribute("method", "post"); + + const csrfTokenInput = document.createElement("input"); + csrfTokenInput.setAttribute("type", "hidden"); + csrfTokenInput.setAttribute("name", "csrfmiddlewaretoken"); + csrfTokenInput.setAttribute("value", csrfToken); + + const bodyInput = document.createElement("textarea"); + bodyInput.setAttribute("name", "body"); + bodyInput.setAttribute("id", "body"); + bodyInput.innerHTML = body; + + form.appendChild(csrfTokenInput); + form.appendChild(bodyInput); - static blotName = "image"; - static tagName = "img"; + document.body.appendChild(form); + form.submit(); } - Quill.register(ImageBlock); - - function imageUpload(formData, quill, range, size) { - const imageURL = "{% url 'ignis:upload_image' %}"; - const headers = { - "X-CSRFToken": "{{ csrf_token }}", - }; - $.ajax({ - url: imageURL, - type: "POST", - headers: headers, - data: formData, - processData: false, - contentType: false, - success: function (data) { - const imageURL = data.url; - quill.updateContents( - new Delta() - .retain(range.index) - .delete(range.length) - .insert({ image: { url: imageURL, size: size } }) - ); - }, - error: function (err) { - console.log(err); - }, + function addImage(size) { + const fileInput = document.createElement("input"); + fileInput.setAttribute("type", "file"); + fileInput.setAttribute("accept", "image/*"); + fileInput.click(); + + fileInput.addEventListener("change", function () { + const file = fileInput.files[0]; + const formURL = "{% url 'ignis:upload_image' %}"; + const csrfToken = "{{ csrf_token }}"; + + const formData = new FormData(); + formData.append("image", file); + formData.append("id", "{{ post.id }}"); + formData.append("csrfmiddlewaretoken", csrfToken); + + $.ajax({ + url: formURL, + type: "POST", + data: formData, + processData: false, + contentType: false, + success: function (data) { + const imageURL = data.url; + const imageHTML = `<img src="${imageURL}" class="${size}">`; + const editor = monaco.editor.getModels()[0]; + if (editorInstance) { + const selection = editorInstance.getSelection(); + const id = { + major: 1, + minor: 1, + }; + const text = imageHTML; + const op = { + identifier: id, + range: { + startLineNumber: selection?.selectionStartLineNumber || 1, + startColumn: selection?.selectionStartColumn || 1, + endLineNumber: selection?.positionLineNumber || 1, + endColumn: selection?.positionColumn || 1, + }, + text: text, + forceMoveMarkers: true, + }; + editorInstance.executeEdits("editor", [op]); + } + }, // success + error: function (data) { + console.log("error"); + console.log(data); + }, // error + }); }); } - - class CodeBlock extends Quill.import("formats/code-block") { - static create(value) { - let domNode = super.create(); - domNode.setAttribute("data-language", value); - return domNode; - } - } - CodeBlock.blotName = "code-block"; - CodeBlock.tagName = "pre"; - Quill.register(CodeBlock); - - const quill = new Quill("#editor-container", { - modules: { - toolbar: { - container: "#toolbar-container", - handlers: { - "code-block": function() { - const language = prompt("Enter language", "text"); - this.quill.format("code-block", language); - - }, - image: function () { - var size = prompt( - "Set Image Size: 0 (default) for inline, 1 for block", - "0" - ); - if (size == "0") { - size = ""; - } else if (size == "1") { - size = "block"; - } else { - size = ""; - } - let fileInput = this.container.querySelector( - "input.ql-image[type=file]" - ); - if (fileInput == null) { - fileInput = document.createElement("input"); - fileInput.setAttribute("type", "file"); - fileInput.setAttribute( - "accept", - "image/png, image/gif, image/jpeg, image/bmp, image/x-icon" - ); - fileInput.classList.add("ql-image"); - fileInput.addEventListener("change", () => { - if (fileInput.files != null && fileInput.files[0] != null) { - let range = this.quill.getSelection(true); - const formData = new FormData(); - formData.append("image", fileInput.files[0]); - formData.append("id", "{{ post.id }}"); - const imageURL = imageUpload(formData, this.quill, range, size); - fileInput.value = ""; - } - }); - this.container.appendChild(fileInput); - } - fileInput.click(); - }, - }, - }, + require.config({ + paths: { + vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs", }, - placeholder: "Compose an epic...", - theme: "snow", }); + require(["vs/editor/editor.main"], function () { + var editor = monaco.editor.create(document.getElementById("editor"), { + language: "html", + automaticLayout: true, + autoClosingBrackets: "languageDefined", + autoClosingQuotes: "always", + autoIndent: true, + autoSurround: "languageDefined", + contextmenu: true, + cursorBlinking: "blink", + cursorSmoothCaretAnimation: "on", + find: { + autoFindInSelection: "never", + seedSearchStringFromSelection: true, + cursorMoveOnType: true, + loop: true, + }, + minimap: { + enabled: false, + }, + padding: { top: 12, right: 0, bottom: 12, left: 0 }, + overviewRulerLanes: 0, + overviewRulerBorder: false, + suggest: { + filterGraceful: false, + enabled: true, + snippetsPreventQuickSuggestions: true, + localityBonus: true, + showWords: true, + showIcons: true, + }, + wordWrap: "on", + wrappingIndent: "same", + value: postBody, + }); - var content = $("#body").val(); - content = content.replace(/<p><br><\/p>/g, ""); - //quill.setContents(quill.clipboard.convert(content), "silent"); - quill.clipboard.dangerouslyPasteHTML(0, content); - quill.on("text-change", function (delta, oldDelta, source) { - document.getElementById("body").value = quill.root.innerHTML; - }); + editor.onDidChangeModelContent(function (e) { + updatePreview(editor.getValue()); + }); - function toggleHTML() { - $("#HTMLContent").toggle(); - } + editorInstance = editor; - + monaco.editor.defineTheme("NightOwl", themeData); + monaco.editor.setTheme("NightOwl"); + }); </script> -{% endblock %}
\ No newline at end of file +{% endblock scripts %} |