Skip to content

frontend: Add syntax colouring#111

Merged
juliaogris merged 3 commits intomasterfrom
syntax-coloring
Mar 21, 2023
Merged

frontend: Add syntax colouring#111
juliaogris merged 3 commits intomasterfrom
syntax-coloring

Conversation

@juliaogris
Copy link
Member

@juliaogris juliaogris commented Mar 19, 2023

Add evy syntax colouring by implementing a custom highlight function for
lightweight JS code editor Yace.
Copy all relevant Yace source files with minor tweaks into a single file
frontend/module/yace-editor.js as we are not (yet) using a JS bundler.

Link: https://github.com/petersolopov/yace
Link: https://github.com/petersolopov/mdhl

@juliaogris juliaogris force-pushed the syntax-coloring branch 4 times, most recently from 05b05ac to 290d04f Compare March 21, 2023 05:03
@github-actions
Copy link

github-actions bot commented Mar 21, 2023

firebase-deployment: https://evy-lang--111-h4ddwnw1.web.app (422152c)

Copy relevant yace editor source files verbatim from
https://github.com/petersolopov/yace/blob/8ed1f99977c4db9bdd60db4e2f5ba4edfcfc1940/src :

	index.js
	plugins/isKey.js
	plugins/history.js
	plugins/preserveInden.js
	plugins/tab.js

Copy all files into a single files unchanged
`frontend/module/yace-editor.js` as we are not (yet) using a JS bundler.

Add prettier ignore line as this file doesn't pass style checks.
Reformat Yace editor module with `make prettier` after removing it from
the .prettierignore file. Remove all but the main editor's default
exports and remove all imports.
@juliaogris juliaogris marked this pull request as ready for review March 21, 2023 10:14
Copy link
Member

@camh- camh- left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks very pretty. But with all that js and css, all I can say is cool bananas. go for it.

Have a cucumber 🥒

@juliaogris juliaogris force-pushed the syntax-coloring branch 2 times, most recently from 2cdd7b6 to 4ee2bb6 Compare March 21, 2023 10:32
const source = await response.text()
document.querySelector("#code").value = source
editor.update({ value: source })
document.querySelector(".editor-wrap").scrollTo(0,0 )
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: that's some odd spacing for the function parameters

Add evy syntax colouring by implementing a custom highlight function for
yace, inspired by the Yace author's markdown highlighter mdhl. The
highlighter is a basic lexer where each token is wrapped in its own
span with the appropriate class. Move styling of yace created elements
all to index.css and display line number by default.

Link: https://github.com/petersolopov/mdhl
@juliaogris juliaogris merged commit 454eddc into master Mar 21, 2023
@juliaogris juliaogris deleted the syntax-coloring branch March 21, 2023 10:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants