KylerOlsen
/
web_python_editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

worked on stuff

This commit is contained in:
Kyler 2023-12-01 10:39:18 -07:00
parent f8a90e39e0
commit cd7d174388
4 changed files with 257 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
editor.css
View File

@ -43,18 +43,19 @@ November 2023
.idle-light .literal.string { color: #00aa00 }
.idle-light .literal.string .format { color: #00aa00 }
.idle-light .escape { color: #000000 }
.idle-light .name { color: #000000 }
.idle-light .name.variable { color: #000000 }
.idle-light .name.constant{ color: #000000 }
.idle-light .name.function { color: #0000ff }
.idle-light .name.class { color: #0000ff }
.idle-light .name.attribute { color: #000000 }
.idle-light .name.property { color: #000000 }
.idle-light .identifier { color: #000000 }
.idle-light .identifier.variable { color: #000000 }
.idle-light .identifier.constant{ color: #000000 }
.idle-light .identifier.function { color: #0000ff }
.idle-light .identifier.class { color: #0000ff }
.idle-light .identifier.attribute { color: #000000 }
.idle-light .identifier.property { color: #000000 }
.idle-light .keyword { color: #ff7700 }
.idle-light .keyword.operator { color: #ff7700 }
.idle-light .builtin { color: #900090 }
.idle-light .operator { color: #000000 }
.idle-light .punctuation { color: #000000 }
.idle-light .whitespace { color: #000000 }
.idle-dark .view-code { background-color: #002240; color: #ffffff; }
.idle-dark .edit-code { caret-color: #ffffff; }
@ -67,15 +68,41 @@ November 2023
.idle-dark .literal.string { color: #02ff02 }
.idle-dark .literal.string .format { color: #02ff02 }
.idle-dark .escape { color: #ffffff }
.idle-dark .name { color: #ffffff }
.idle-dark .name.variable { color: #ffffff }
.idle-dark .name.constant{ color: #ffffff }
.idle-dark .name.function { color: #5e5eff }
.idle-dark .name.class { color: #5e5eff }
.idle-dark .name.attribute { color: #ffffff }
.idle-dark .name.property { color: #ffffff }
.idle-dark .identifier { color: #ffffff }
.idle-dark .identifier.variable { color: #ffffff }
.idle-dark .identifier.constant{ color: #ffffff }
.idle-dark .identifier.function { color: #5e5eff }
.idle-dark .identifier.class { color: #5e5eff }
.idle-dark .identifier.attribute { color: #ffffff }
.idle-dark .identifier.property { color: #ffffff }
.idle-dark .keyword { color: #ff8000 }
.idle-dark .keyword.operator { color: #ff8000 }
.idle-dark .builtin { color: #ff00ff }
.idle-dark .operator { color: #ffffff }
.idle-dark .punctuation { color: #ffffff }
.idle-dark .whitespace { color: #ffffff }
.idle-test .view-code { background-color: #442240; color: #ff0000; }
.idle-test .edit-code { caret-color: #ff0000; }
.idle-test .token { color: #ffffff }
.idle-test .comment { color: #c0c0c0; font-style: italic; }
.idle-test .output { color: #808080 }
.idle-test .error { color: #ff0080 }
.idle-test .literal { color: #00ffff }
.idle-test .literal.number { color: #008080 }
.idle-test .literal.string { color: #00ff00 }
.idle-test .literal.string .format { color: #0000ff }
.idle-test .escape { color: #ffff80 }
.idle-test .identifier { color: #ffff00 }
.idle-test .identifier.variable { color: #808000 }
.idle-test .identifier.constant{ color: #008000 }
.idle-test .identifier.function { color: #8080ff }
.idle-test .identifier.class { color: #80ff80 }
.idle-test .identifier.attribute { color: #800000 }
.idle-test .identifier.property { color: #800080 }
.idle-test .keyword { color: #ff8000 }
.idle-test .keyword.operator { color: #ff8080 }
.idle-test .builtin { color: #ff00ff }
.idle-test .operator { color: #000080 }
.idle-test .punctuation { color: #8000ff }
.idle-test .whitespace { background-color: #ffffff }

111
editor.js
View File

@ -25,8 +25,9 @@ class PythonEditor{
}
textInput(e) {
let text = this.edit_code.innerHTML;
syntax_highlight(text).forEach(ele => this.view_code.appendChild(ele));
let text = this.edit_code.innerText;
this.view_code.innerHTML = "";
syntax_highlight_html(text).forEach(ele => this.view_code.appendChild(ele));
}
handleKeyDown(e) {
@ -59,30 +60,112 @@ function insertTab() {
function syntax_highlight(text) {
const whitespace = " \n\t";
const digit_start = "0123456789.";
const digit_second = "bBoO";
const digit_continue = "0123456789._";
const string_start = `'"`;
const string_alt_start = [
`r'`, `r"`, `rf`, `rb`, `rF`, `rB`,
`R'`, `R"`, `Rf`, `Rb`, `RF`, `RB`,
`f'`, `f"`, `fr`, `fR`,
`F'`, `F"`, `Fr`, `FR`,
`b'`, `b"`, `br`, `bR`,
`B'`, `B"`, `Br`, `BR`,
];
const elements = [];
const tokens = [];
var char = text.substr(0, 1); text = text.substr(1);
while (text.length) {
const element = document.createElement("span");
var token_type = "";
const token = {'token_type': '', 'value':''};
if (whitespace.includes(char))
token_type = "whitespace";
else if (string_start.includes(char))
token_type = "string";
// Whitespace
if (whitespace.includes(char)) {
token.token_type = "whitespace";
while (text.length && whitespace.includes(char)) {
token.value += char;
char = text.substr(0, 1); text = text.substr(1);
}
}
while (text.length) {
if (token_type == "whitespace" && !whitespace.includes(char))
break;
element.innerText.concat(char);
// Comments
else if (char == '#') {
token.token_type = "comment";
while (text.length && char != "\n") {
token.value += char;
char = text.substr(0, 1); text = text.substr(1);
}
}
// String literals
else if (string_start.includes(char) || (string_alt_start.includes(char + text.substr(0, 1)))) {
var depth = 1;
var start;
if (string_start.includes(char)) {
token.token_type = "string";
start = char;
} else {
token.value += char;
char = text.substr(0, 1); text = text.substr(1);
if (!string_start.includes(char)) {
token.value += char;
char = text.substr(0, 1); text = text.substr(1);
}
if (token.value.includes('r') || token.value.includes('R'))
token.token_type += "raw-";
if (token.value.includes('f') || token.value.includes('F'))
token.token_type += "f-";
if (token.value.includes('b') || token.value.includes('B'))
token.token_type += "byte-";
token.token_type += "string";
start = char;
}
if (text.substr(0, 1) == start && text.substr(1, 1) == start) depth = 3;
token.value += char;
char = text.substr(0, 1); text = text.substr(1);
while (text.length && depth && (depth > 1 || char != '\n')) {
token.value += char;
if (char == start && depth == 1) depth--;
else if (char == start && text.substr(0, 1) == start && depth == 2) depth--;
else if (char == start && text.substr(0, 1) == start && text.substr(1, 1) == start && depth == 3) depth--;
char = text.substr(0, 1); text = text.substr(1);
}
}
else {
token.token_type = "token";
token.value = char;
char = text.substr(0, 1); text = text.substr(1);
}
elements.push(element);
tokens.push(token);
}
return tokens;
}
function syntax_highlight_html(text) {
const tokens = syntax_highlight(text);
const elements = [];
var last = "whitespace";
tokens.forEach(token => {
const element = document.createElement("span");
if (token.token_type == "whitespace")
element.classList.add("whitespace");
else if (token.token_type == "comment")
element.classList.add("comment");
else if (token.token_type.substr(-6) == "string") {
element.classList.add("literal");
element.classList.add("string");
} else
element.classList.add("token");
element.innerText = token.value;
elements.push(element);
last = token.token_type;
})
return elements;
}

118
syntax_test.py Normal file
View File

@ -0,0 +1,118 @@
# Python Syntax Test
# Segments written by Kyler or (and mostly at that) from python docs
if 1900 < year < 2100 and 1 <= month <= 12 \
and 1 <= day <= 31 and 0 <= hour < 24 \
and 0 <= minute < 60 and 0 <= second < 60: # Looks like a valid date
return 1
month_names = ['Januari', 'Februari', 'Maart', # These are the
'April', 'Mei', 'Juni', # Dutch names
'Juli', 'Augustus', 'September', # for the months
'Oktober', 'November', 'December'] # of the year
# Here is an example of a correctly (though confusingly)
# indented piece of Python code:
def perm(l):
# Compute the list of all permutations of l
if len(l) <= 1:
return [l]
r = []
for i in range(len(l)):
s = l[:i] + l[i+1:]
p = perm(s)
for x in p:
r.append(l[i:i+1] + x)
return r
def perm2(l):
for i in range(len(l)):
s = l[:i] + l[i+1:]
p = perm(l[:i] + l[i+1:])
for x in p:
r.append(l[i:i+1] + x)
return r
'This string will not include \
backslashes or newline characters.'
re.compile("[A-Za-z_]" # letter or underscore
"[A-Za-z0-9_]*" # letter, digit or underscore
)
# Some examples of formatted string literals:
name = "Fred"
f"He said his name is {name!r}."
f"He said his name is {repr(name)}." # repr() is equivalent to !r
width = 10
precision = 4
value = decimal.Decimal("12.34567")
f"result: {value:{width}.{precision}}" # nested fields
today = datetime(year=2017, month=1, day=27)
f"{today:%B %d, %Y}" # using date format specifier
f"{today=:%B %d, %Y}" # using date format specifier and debugging
number = 1024
f"{number:#0x}" # using integer format specifier
foo = "bar"
f"{ foo = }" # preserves whitespace
line = "The mill's closed"
f"{line = }"
f"{line = :20}"
f"{line = !r:20}"
newline = ord('\n')
f"newline: {newline}"
def foo():
f"Not a docstring"
foo.__doc__ is None
# Triple and Multiline
"""Test" test"""
"""test
# test
test"""
# Some examples of integer literals:
7
2147483647
0o177
0b100110111
3
79228162514264337593543950336
0o377
0xdeadbeef
100_000_000_000
0b_1110_0101
# Some examples of floating point literals:
3.14
10.
.001
1e100
3.14e-10
0e0
3.14_15_93
# Some examples of imaginary literals:
3.14j
10.j
10j
.001j
1e100j
3.14e-10j
3.14_15_93j

1
test.html
View File

@ -33,6 +33,7 @@ November 2023
<div class="flex-area">
<div class="code idle-dark"></div>
<div class="code idle-test"></div>
<div class="code idle-light"></div>
</div>