You are expected to have at least basic knowledge of HTML and how websites work.
1. Create a new directory on your website - called, for example, gml
.
2. Upload gml_string.js
(from "gml_string (for websites).zip") to that directory.
3. Create a stylesheet file in the same directory - called, for example, gml.css
.
This will define how different code bits will look.
For something resembling the syntax highlighting in GameMaker IDE, you can use the following:
.gmlError { color: #f0f }
.gmlCommentLine, .gmlCommentBlock { color: #5B995B }
.gmlMacro, .gmlEnum, .gmlEnumField {
color: #FF8080;
}
.gmlNumber { color: #FF8080 }
.gmlString { color: #FCF320 }
.gmlKeyword, .gmlCurlyBracket,
.gmlFunction, .gmlScript {
color: #FFB871;
}
.gmlLocal { color: #FFF899 }
.gmlVariable { color: #58E55A }
.gmlHeaderMeta { color: #A7B }
.gmlHeaderName { color: #77BB5B }
And for light-mode websites, you can use the following (GM8.1-inspired):
.gmlError { color: red }
.gmlCommentLine, .gmlCommentBlock { color: #008000 }
.gmlKeyword, .gmlCurlyBracket {
color: #00379B;
font-weight: bold;
}
.gmlNumber, .gmlString { color: #00f }
.gmlLocal { color: #748 }
.gmlHeaderMeta, .gmlHeaderName { color: #0078AA }
.gmlScript { color: #808 }
.gmlFunction, .gmlMacro, .gmlVariable, .gmlEnum, .gmlEnumField {
color: #990000;
}
4. Create a new JavaScript file in that same directory - called, for example, gml_highlight.js
.
This will be the file responsible for loading the API and applying the syntax highlighter.
If you are putting your code in <pre>
tags, it can go like this::
gml_string.API.loadFromString(`
is_real(val)
is_numeric(val)
is_string(val)
is_array(val)
// You can paste the entire `fnames` file from the runtime directory in this string
// Find its location via File - Preferences - Runtime Feeds
`);
function highlightCodeBlocks() {
for (let el of document.querySelectorAll("pre:not(.gml)")) {
el.classList.add(".gml");
el.innerHTML = gml_string.renderToHTML(el.innerHTML, "gml");
}
}
if (document.readyState == "loading") {
document.addEventListener('DOMContentLoaded', highlightCodeBlocks);
} else highlightCodeBlocks();
5. Include the files in your page template(s).
The easiest would be to put everything inside your <head>
tag:
<link rel="stylesheet" href="/gml/gml.css" />
<script src="/gml/gml_string.js"></script>
<script src="/gml/gml_highlight.js"></script>