syntax highlighting

_includes/layouts/post.njk

@@ -3,7 +3,7 @@ layout: layouts/base.njk
 ---
 
 {# Only include the syntax highlighter CSS on blog posts #}
-{%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %}
+{%- css %}{% include "public/css/code.css" %}{% endcss %}
 {%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}
 <h1>{{ page.url | pageTitle }}</h1>
 {{ content | safe }}

content/case-format.md

@@ -1,14 +1,14 @@
 Keywords and variable names in Sanny Builder are case insensitive. `INT variable` and `int Variable` are the same thing.
 
-```cs
+```sb
 INT variable = 1
 
 Variable = 2
 ```
 
 String literals are encoded as is.
 
-```cs
+```sb
 string key1 = 'GXT_KEY'
 string key2 = 'gxt_key'
 ```

content/cleo-directive.md

@@ -6,7 +6,7 @@ Sanny Builder makes it trivial. You need to go to `File` -> `New CLEO script...`
 
 Sanny Builder will create a basic template for you:
 
-```cs
+```sb
 {$CLEO .cs}
 nop
 

content/comments.md

@@ -2,20 +2,20 @@ A _comment_ is a piece of text that is ignored by the compiler. Comments may ser
 
 Line comments start with `//` and end with the end of the line. For example:
 
-```cs
+```sb
 // End of script
 terminate_this_custom_script;
 ```
 
 Or:
 
-```cs
+```sb
 terminate_this_custom_script; // End of script
 ```
 
 Block comments start with `/*` and end with `*/`. They can span multiple lines:
 
-```cs
+```sb
 /*
  This is a multi-line comment.
  It spans multiple lines.
@@ -24,12 +24,12 @@ Block comments start with `/*` and end with `*/`. They can span multiple lines:
 
 Or used in the middle of the code:
 
-```cs
+```sb
 set_time_of_day /* hours */ 12 /* minutes */ 30
 ```
 
 Block comments can not be nested. For example, the following code is invalid:
 
-```cs
+```sb
 /* This is a comment /* This is a nested comment */ */
 ```

content/conditions.md

@@ -2,7 +2,7 @@ Often you want to run some code only if a certain condition is met. For example,
 
 To do this, you can use the `if` statement. It has the following syntax:
 
-```cs
+```sb
 if <condition>
 then
 // code to run if condition is true
@@ -11,7 +11,7 @@ end
 
 A `<condition>` is a conditional instruction. It is written just like any other command, but after execution it changes the status of the current `if` statement to `true` or `false`. If the status is `true`, the code inside the `then..end` block is executed. If the status is `false`, the code is skipped:
 
-```cs
+```sb
 if is_key_pressed 113 // F2
 then
     print_help 'HELP_F2'

content/else.md

@@ -2,7 +2,7 @@ When checking for a condition, you can also specify what to do if the condition
 
 An `if` statement with `else` has the following syntax:
 
-```cs
+```sb
 if <condition>
 then
 // code to run if condition is true
@@ -15,7 +15,7 @@ Note that you can't use `else` without `then`, and the `else` block must follow
 
 Example:
 
-```cs
+```sb
 if is_key_pressed 113 // F2
 then
     print_help 'HELP_F2' // show message if F2 is pressed

content/instructions.md

@@ -4,7 +4,7 @@ In Sanny Builder each instruction is written on a separate line. An instruction
 
 Let's have a look at the shortest possible script that has only one instruction:
 
-```cs
+```sb
 terminate_this_custom_script
 ```
 

content/numbers.md

@@ -4,7 +4,7 @@ There are two types of numbers: integers and floats. Integers are whole numbers,
 
 Floats are numbers with a decimal point, such as `1.0`, `2.5`, `3.14`, etc. They usually represent physical quantities, such as speed and time, or coordinates of objects in the game world.
 
-```cs
+```sb
 set_time_scale 0.5
 set_car_density_multiplier 1.0
 ```

content/parameters.md

@@ -1,6 +1,6 @@
 Most of the commands require additional information to work. For example, the command `create_car` requires a model of the car and the coordinates of the spawn location. This additional information is called _parameters_. Parameters are separated from the command name by a space:
 
-```cs
+```sb
 set_time_of_day 12 30
 ```
 

content/script-show-message.md

@@ -6,13 +6,13 @@ Create a new CLEO script file by clicking `File` -> `New CLEO Script...`.
 
 After `nop` add a new line:
 
-```cs
+```sb
 print_string_now "Hello, world!" 2000
 ```
 
 Your script should look like this:
 
-```cs
+```sb
 {$CLEO .cs}
 nop
 

content/script-spawn-vehicle.md

@@ -1,6 +1,6 @@
 We will break down the script into smaller parts and explain each part in detail. The final script will look like this:
 
-```cs
+```sb
 {$CLEO .cs}
 nop
 

content/strings.md

@@ -1,6 +1,6 @@
 Another type of parameter is a string. A string is a sequence of characters enclosed in single or double quotes. We will learn the difference between single and double quotes later:
 
-```cs
+```sb
 print_help 'GXT_KEY'
 load_sprite 1 "DOWN"
 ```

content/variables.md

@@ -1,6 +1,6 @@
 Opposite to number and string literals are variables. A _variable_ is a named storage for a value. A variable can store a number or a string. Its value can change over time. This operation is called assignment. A variable can be assigned a literal or another variable. For example:
 
-```cs
+```sb
 int hour = 12
 int minute = 30
 
@@ -12,7 +12,7 @@ The first two lines declare two variables, `hour` and `minute`, and assign them
 
 Variables that hold integer values are declared with the `int` keyword. You can then use them in commands that expect an integer number. For example:
 
-```cs
+```sb
 int hour = 12
 int minute = 30
 
@@ -23,15 +23,15 @@ This script will set the time of day to `12:30`.
 
 Variables that hold floating-point values are declared with the `float` keyword. You can then use them in commands that expect a floating-point number. For example:
 
-```cs
+```sb
 float timeScale = 0.5
 
 set_time_scale timeScale
 ```
 
 Variables that hold string values are declared with either `string` or `longstring` keywords. Again, we will discuss the difference between them later. You can then use string variables in commands that expect a string. For example:
 
-```cs
+```sb
 string gxtKey = 'GXT_KEY'
 longstring spriteName = "DOWN"
 

eleventy.config.js

@@ -6,6 +6,8 @@ const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginBundle = require("@11ty/eleventy-plugin-bundle");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
+const pascal = require("prismjs/components/prism-pascal");
+
 
 const pluginImages = require("./eleventy.config.images.js");
 const toc = require("./_data/toc.json");
@@ -15,7 +17,6 @@ module.exports = function (eleventyConfig) {
 	// For example, `./public/css/` ends up in `_site/css/`
 	eleventyConfig.addPassthroughCopy({
 		"./public/": "/",
-		"./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css",
 	});
 
 	// Run Eleventy when these files change:
@@ -31,6 +32,26 @@ module.exports = function (eleventyConfig) {
 	// eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
 		preAttributes: { tabindex: 0 },
+		init: function ({ Prism }) {
+			Prism.languages.sb = Prism.languages.extend("pascal", {
+				keyword: [
+					{
+						pattern:
+							/(^|[^&])\b(?:terminate_this_custom_script|jump|set_time_scale|set_car_density_multiplier|set_time_of_day|print_help|load_sprite|is_key_pressed|print_string_now)\b/i,
+						lookbehind: true,
+					},
+					{
+						pattern:
+							/(^|[^&])\b(?:IF|AND|CONST|DOWNTO|ELSE|END|FALSE|FOR|HEX|NOT|OR|REPEAT|THEN|TO|TRUE|UNKNOWN|VAR|UNTIL|WHILE|INTEGER|INT|FLOAT|SHORTSTRING|STRING|LONGSTRING|IMPORT|EXPORT|SWITCH|CASE|DEFAULT|FUNCTION)\b/i,
+						lookbehind: true,
+					},
+				],
+				'comment': {
+					pattern: /\/\*[\s\S]*?\*\/|\{[\s\S]*?\}|\/\/.*/,
+					greedy: true
+				},
+			});
+		},
 	});
 	eleventyConfig.addPlugin(pluginNavigation);
 	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
@@ -74,17 +95,14 @@ module.exports = function (eleventyConfig) {
 		for (let j = 0; j < sections.length; j++) {
 			for (let i = 0; i < sections[j].pages.length; i++) {
 				if (slug === sections[j].pages[i].slug) {
-					return (
-						sections[j].pages[i].name || null
-					);
+					return sections[j].pages[i].name || null;
 				}
 			}
 		}
 
 		return null;
 	});
 
-
 	// Customize Markdown library settings:
 	eleventyConfig.amendLibrary("md", (mdLib) => {
 		mdLib.use(markdownItAnchor, {

public/css/code.css

@@ -0,0 +1,52 @@
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #1e293b;
+}
+
+.token.comment {
+	color: #9daab6;
+}
+
+.token.directive {
+	color: rgb(135, 191, 108);
+}
+
+.token.boolean,
+.token.number {
+	color: #ff9d3d;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #e36209;
+}
+
+.token.variable {
+	color: rgb(113, 167, 255);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #e6db74;
+}
+
+.token.keyword {
+	color: rgb(97, 227, 165);
+}
+
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

public/css/styles.pcss

@@ -42,10 +42,6 @@ code {
 	@apply rounded-md bg-slate-800 text-neutral-200;
 	@apply text-sm;
 }
-pre code.hljs {
-	@apply bg-slate-800 text-neutral-200;
-	padding: 0 !important;
-}
 
 p code {
 	@apply p-1;