feat/prism
Evan Chen 2021-10-19 17:28:38 +08:00
parent 46bf05acf1
commit 46c974f7ca
9 changed files with 36 additions and 71 deletions

View File

@ -5,7 +5,10 @@
"scripts": {
"build-sass": "sass --style compressed src/main.scss public/css/main.css",
"build-js": "parcel build src/main.js --dist-dir public/js",
"build-sass-dev": "sass src/main.scss public/css/main.css",
"build-js-dev": "parcel build src/main.js --dist-dir public/js --no-optimize",
"start":"npm run build-sass && npm run build-js",
"serve":"npm run build-sass-dev && npm run build-js-dev",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {

View File

@ -1,5 +1 @@
import Prism from "prismjs";
import "prismjs/plugins/custom-class/prism-custom-class";
Prism.plugins.customClass.map({ number: "prism-number", tag: "prism-tag" });
import "./editor"

View File

@ -1,2 +1,5 @@
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
@import "../node_modules/bulma/bulma.sass";
@import "./scss/prism.scss";
@import "./scss/editor.scss";

View File

@ -1,39 +0,0 @@
// codeInput
// by WebCoder49
// Based on a CSS-Tricks Post
// Needs Prism.js
function update(text) {
let result_element = document.querySelector("#highlighting-content");
// Handle final newlines (see article)
if(text[text.length-1] == "\n") {
text += " ";
}
// Update code
result_element.innerHTML = text.replace(new RegExp("&", "g"), "&amp;").replace(new RegExp("<", "g"), "&lt;"); /* Global RegExp */
// Syntax Highlight
Prism.highlightElement(result_element);
}
function sync_scroll(element) {
/* Scroll result to scroll coords of event - sync with textarea */
let result_element = document.querySelector("#highlighting");
// Get and set x and y
result_element.scrollTop = element.scrollTop;
result_element.scrollLeft = element.scrollLeft;
}
function check_tab(element, event) {
let code = element.value;
if(event.key == "Tab") {
/* Tab key pressed */
event.preventDefault(); // stop normal
let before_tab = code.slice(0, element.selectionStart); // text before tab
let after_tab = code.slice(element.selectionEnd, element.value.length); // text after tab
let cursor_pos = element.selectionEnd + 1; // where cursor moves after tab - moving forward by 1 char to after tab
element.value = before_tab + "\t" + after_tab; // add tab char
// move cursor
element.selectionStart = cursor_pos;
element.selectionEnd = cursor_pos;
update(element.value); // Update text to include indent
}
}

View File

@ -2,7 +2,7 @@
<script src="/public/js/main.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
<script src="public/js/prism1.23.0.min.js"></script>
<script src="public/js/main.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script> -->
</body>
</html>

View File

@ -5,7 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ConfigUI</title>
<link rel="stylesheet" href="/public/css/bulma0.9.3.min.css">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> -->
<link rel="stylesheet" href="/public/css/main.css">
</head>

View File

@ -0,0 +1,5 @@
{{define "components/editor"}}
<code-input class="content" style="height: 70vh; width: 100%" lang="{{.Lang}}" name="editor">
{{.Content}}
</code-input>
{{end}}

View File

@ -0,0 +1,20 @@
{{define "components/menu"}}
<section class="is-large">
<aside class="menu">
<p class="menu-label">
Files
</p>
<ul class="menu-list">
{{ range .Files }}
<li><a>{{ . }}</a></li>
{{ end }}
</ul>
<p class="menu-label">
ConfigUI
</p>
<ul class="menu-list">
<li><a{{if eq .Active "ConfigUI"}} class="is-active"{{end}}>config.json</a></li>
</ul>
</aside>
</section>
{{end}}

View File

@ -14,24 +14,7 @@
<div class="tile is-ancestor mx-2">
<div class="tile is-3 is-vertical is-parent">
<div class="tile is-child box">
<section class="is-large">
<aside class="menu">
<p class="menu-label">
Files
</p>
<ul class="menu-list">
{{ range .Files }}
<li><a>{{ . }}</a></li>
{{ end }}
</ul>
<p class="menu-label">
ConfigUI
</p>
<ul class="menu-list">
<li><a{{if eq .Active "ConfigUI"}} class="is-active"{{end}}>config.json</a></li>
</ul>
</aside>
</section>
{{template "components/menu" .}}
</div>
<div class="tile is-child box">
<p class="title">Two</p>
@ -40,12 +23,7 @@
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
<textarea class="content" placeholder="Enter HTML Source Code" id="editing" spellcheck="false" oninput="update(this.value); sync_scroll(this);" onscroll="sync_scroll(this);" onkeydown="check_tab(this, event);"></textarea>
<pre id="highlighting" aria-hidden="true">
<code class="language-html" id="highlighting-content">{{.Content}}</code>
</pre>
<!-- <code-input class="content" id="edit" lang="{{.Lang}}" name="config">{{.Content}}</code-input> -->
{{template "components/editor" .}}
</div>
</div>
</div>