pankgeorg/test.html Secret

## test.html
<!DOCTYPE html>
<html>
    <div id="codemirror"></div>
    <style>
        #codemirror{
            height: 70vh;
            outline: 1px solid black;
        }
    </style>
    <script type="module">
import {
    EditorState,
    EditorView,
    julia_andrey as julia_andrey_original,
    tags,
    HighlightStyle,
    parseMixed,
    markdown,
    html,
    htmlLanguage,
    markdownLanguage,
    javascript,
} from "https://cdn.jsdelivr.net/gh/JuliaPluto/codemirror-pluto-setup@67894b5/dist/index.es.min.js"

export const pluto_syntax_colors = HighlightStyle.define([
{ tag: tags.literal, color: "#5e7ad3", fontWeight: 700 },
{ tag: tags.macroName, color: "#5668a4", fontWeight: 700 },
{ tag: tags.standard(tags.variableName), color: "#5e7ad3", fontWeight: 700 },
{ tag: tags.bool, color: "#5e7ad3", fontWeight: 700 },
{ tag: tags.keyword, color: "#fc6" },
{ tag: tags.comment, color: "#e96ba8", fontStyle: "italic" },
{ tag: tags.atom, color: "#815ba4" },
{ tag: tags.number, color: "#815ba4" },
{ tag: tags.bracket, color: "#48b685" },
{ tag: tags.keyword, color: "#ef6155" },
{ tag: tags.string, color: "#da5616" },
{ tag: tags.variableName, color: "#5668a4", fontWeight: 700 },
{ tag: tags.definition(tags.variableName), color: "#f99b15" },
{ tag: tags.bracket, color: "#41323f" },
{ tag: tags.brace, color: "#41323f" },
{ tag: tags.tagName, color: "#ef6155" },
{ tag: tags.link, color: "#815ba4" },
{ tag: tags.invalid, color: "#000", background: "#ef6155" },
// Markdown
{ tag: tags.heading, color: "#0e2bb9", fontWeight: 500 },
{ tag: tags.heading1, color: "#0e2bb9", fontWeight: 500, fontSize: "1.5em" },
{ tag: tags.heading2, color: "red", fontWeight: 400, fontSize: "1.4em" },
{ tag: tags.heading3, color: "red", fontWeight: 400, fontSize: "1.25em" },
{ tag: tags.heading4, color: "red", fontWeight: 400, fontSize: "1.1em" },
{ tag: tags.heading5, color: "red", fontWeight: 400, fontSize: "1em" },
{ tag: tags.heading6, color: "red", fontWeight: "bold", fontSize: "0.8em" },
{ tag: tags.url, color: "#48b685", textDecoration: "underline" },
{ tag: tags.quote, color: "#444", fontStyle: "italic" },
{ tag: tags.literal, color: "grey", fontWeight: 700 },
// HTML
{ tag: tags.tagName, color: "darkblue", fontWeight: 700 },
{ tag: tags.attributeName, color: "darkblue", fontWeight: 400 },
{ tag: tags.attributeValue, color: "orange", fontWeight: 700 },
{ tag: tags.angleBracket, color: "black", fontWeight: 700 },
{ tag: tags.content, color: "darkgrey", fontWeight: 400 },
{ tag: tags.documentMeta, color: "grey", fontStyle: "italic" },
// CSS
{ tag: tags.className, color: "grey", fontWeight: "bold" },

])
const htmlParser = htmlLanguage.parser
const mdParser = markdownLanguage.parser

const juliaWrapper = parseMixed((node, input) => {
    if (node.type.id !== 69 && node.type.id !== 68 /* TemplateString */) {
        return null
    }
    //Looking for tag OR MacroIdentifier
    const tagNode = node.node.prevSibling || node.node.parent.prevSibling
    if (!tagNode){
        // If you can't find a tag node, something is broken in the julia syntax,
        // so parse it as Julia. Probably wrong interpolation!
        return null
    }
    const tag = input.read(tagNode.from, tagNode.to)
    console.log({...node}, {...input}, node.type.name, node.type.id, node.from, node.to)
    let parser

    if (tag === "html" || tag === "@htl") {
        parser = htmlParser
    } else if (tag === "md") {
        parser = mdParser
    } else {
        return null
    }

    const overlay = [] //: { from: number, to: number }[] = [];
    let from = node.from
    console.log(node.node.firstChild)
    for (let child = node.node.firstChild; child !== null; child = child?.nextSibling) {
        overlay.push({ from, to: child.from })
        from = child.to
    }

    if (overlay.length === 0) {
        return { parser }
    }

    overlay.push({ from, to: node.to })
    return { parser, overlay: overlay }
})

const julia_andrey = julia_andrey_original()

julia_andrey.language.parser = julia_andrey.language.parser.configure({ wrap: juliaWrapper })


new EditorView({
    state: EditorState.create({
        doc: "",
        extensions: [
            julia_andrey,
            pluto_syntax_colors,
            markdown(),
            html(),
            javascript(),
        ],
    }),
    parent: document.querySelector("#codemirror"),
})

    </script>
</html>
	<!DOCTYPE html>
	<html>
	<div id="codemirror"></div>
	<style>
	#codemirror{
	height: 70vh;
	outline: 1px solid black;
	}
	</style>
	<script type="module">
	import {
	EditorState,
	EditorView,
	julia_andrey as julia_andrey_original,
	tags,
	HighlightStyle,
	parseMixed,
	markdown,
	html,
	htmlLanguage,
	markdownLanguage,
	javascript,
	} from "https://cdn.jsdelivr.net/gh/JuliaPluto/codemirror-pluto-setup@67894b5/dist/index.es.min.js"

	export const pluto_syntax_colors = HighlightStyle.define([
	{ tag: tags.literal, color: "#5e7ad3", fontWeight: 700 },
	{ tag: tags.macroName, color: "#5668a4", fontWeight: 700 },
	{ tag: tags.standard(tags.variableName), color: "#5e7ad3", fontWeight: 700 },
	{ tag: tags.bool, color: "#5e7ad3", fontWeight: 700 },
	{ tag: tags.keyword, color: "#fc6" },
	{ tag: tags.comment, color: "#e96ba8", fontStyle: "italic" },
	{ tag: tags.atom, color: "#815ba4" },
	{ tag: tags.number, color: "#815ba4" },
	{ tag: tags.bracket, color: "#48b685" },
	{ tag: tags.keyword, color: "#ef6155" },
	{ tag: tags.string, color: "#da5616" },
	{ tag: tags.variableName, color: "#5668a4", fontWeight: 700 },
	{ tag: tags.definition(tags.variableName), color: "#f99b15" },
	{ tag: tags.bracket, color: "#41323f" },
	{ tag: tags.brace, color: "#41323f" },
	{ tag: tags.tagName, color: "#ef6155" },
	{ tag: tags.link, color: "#815ba4" },
	{ tag: tags.invalid, color: "#000", background: "#ef6155" },
	// Markdown
	{ tag: tags.heading, color: "#0e2bb9", fontWeight: 500 },
	{ tag: tags.heading1, color: "#0e2bb9", fontWeight: 500, fontSize: "1.5em" },
	{ tag: tags.heading2, color: "red", fontWeight: 400, fontSize: "1.4em" },
	{ tag: tags.heading3, color: "red", fontWeight: 400, fontSize: "1.25em" },
	{ tag: tags.heading4, color: "red", fontWeight: 400, fontSize: "1.1em" },
	{ tag: tags.heading5, color: "red", fontWeight: 400, fontSize: "1em" },
	{ tag: tags.heading6, color: "red", fontWeight: "bold", fontSize: "0.8em" },
	{ tag: tags.url, color: "#48b685", textDecoration: "underline" },
	{ tag: tags.quote, color: "#444", fontStyle: "italic" },
	{ tag: tags.literal, color: "grey", fontWeight: 700 },
	// HTML
	{ tag: tags.tagName, color: "darkblue", fontWeight: 700 },
	{ tag: tags.attributeName, color: "darkblue", fontWeight: 400 },
	{ tag: tags.attributeValue, color: "orange", fontWeight: 700 },
	{ tag: tags.angleBracket, color: "black", fontWeight: 700 },
	{ tag: tags.content, color: "darkgrey", fontWeight: 400 },
	{ tag: tags.documentMeta, color: "grey", fontStyle: "italic" },
	// CSS
	{ tag: tags.className, color: "grey", fontWeight: "bold" },

	])
	const htmlParser = htmlLanguage.parser
	const mdParser = markdownLanguage.parser

	const juliaWrapper = parseMixed((node, input) => {
	if (node.type.id !== 69 && node.type.id !== 68 /* TemplateString */) {
	return null
	}
	//Looking for tag OR MacroIdentifier
	const tagNode = node.node.prevSibling \|\| node.node.parent.prevSibling
	if (!tagNode){
	// If you can't find a tag node, something is broken in the julia syntax,
	// so parse it as Julia. Probably wrong interpolation!
	return null
	}
	const tag = input.read(tagNode.from, tagNode.to)
	console.log({...node}, {...input}, node.type.name, node.type.id, node.from, node.to)
	let parser

	if (tag === "html" \|\| tag === "@htl") {
	parser = htmlParser
	} else if (tag === "md") {
	parser = mdParser
	} else {
	return null
	}

	const overlay = [] //: { from: number, to: number }[] = [];
	let from = node.from
	console.log(node.node.firstChild)
	for (let child = node.node.firstChild; child !== null; child = child?.nextSibling) {
	overlay.push({ from, to: child.from })
	from = child.to
	}

	if (overlay.length === 0) {
	return { parser }
	}

	overlay.push({ from, to: node.to })
	return { parser, overlay: overlay }
	})

	const julia_andrey = julia_andrey_original()

	julia_andrey.language.parser = julia_andrey.language.parser.configure({ wrap: juliaWrapper })


	new EditorView({
	state: EditorState.create({
	doc: "",
	extensions: [
	julia_andrey,
	pluto_syntax_colors,
	markdown(),
	html(),
	javascript(),
	],
	}),
	parent: document.querySelector("#codemirror"),
	})

	</script>
	</html>