Add GDScript Syntax Highlighting (#25)

Co-authored-by: Jowan-Spooner <[email protected]>

documentation/getting-started.md

@@ -13,11 +13,13 @@
 Dialogic 2 requires Godot 4.1 or higher. If you don't know what version you have installed, take a look at the bottom of your Godot Editor.
 
 Let's install Dialogic 2:
+
 - Download the ZIP file here from your wanted Dialogic version: [GitHub Dialogic Releases](https://github.com/coppolaemilio/dialogic/releases).
 - Extract the `addons` folder from this ZIP-file, it contains Dialogic.
 - Move the `addons` folder to your Dialogic project folder.
 
 Now, let's verify you have correctly installed Dialogic:
+
 - You have this folder path `res://addons/dialogic`
 - Head to `Project > Project Settings`
 - Click the `Plugins` tab.
@@ -36,7 +38,7 @@ Now, let's verify you have correctly installed Dialogic:
 You can now access the dialogic interface by clicking the new tab at the very top (next to 2D, 3D, Script and AssetLib).
 ![godot_main_tabs](/media/godot_main_tabs.png)
 
-You will be greeted by the dialogic home screen. At the top you can see the different editor dialogic has, at the left the a sidebar that will contain recently used characters and timelines.
+You will be greeted by the dialogic home screen. At the top you can see the different editors dialogic has, at the left a sidebar that will contain recently used characters and timelines.
 
 <img src="/media/editor_overview.png" width="600"/>
 
@@ -58,7 +60,7 @@ Once you hit `Save`, you can start adding events from the panel at the right of
 
 *Tip: You can learn more about each event and it's settings by right-clicking on an event and selecting `Documentation`.*
 
-If you want, you can switch to the text editor by clicking on the `Text Editor` button at the top right. You can find out more about writing timelines in text format here: [Writing timelines in text format](./Timeline_Text_Syntax.md).
+If you want, you can switch to the text editor by clicking on the `Text Editor` button at the top right. You can find out more about writing timelines in text format here: [Writing timelines in text format](timeline-text-syntax.md).
 
 You can test the timeline by clicking the `Play Timeline` button at the top right.
 
@@ -68,8 +70,7 @@ To create a new character press the `Add Character` button on the top right.
 
 As for timelines, you need to select the place to save to and a name.
 
-
-```admonish danger
+```admonish warning
 This name (without `.dch`) is what will be saved whenever you use that character in a timeline and what you will have to write when referencing the character (e.g. `Emilio: This is a text event.`, if the file is named `Emilio.dch`). So make sure to give it a good name.
 
 You can change the name that will actually be displayed in game as the `display_name` property.
@@ -78,23 +79,23 @@ You can change the name that will actually be displayed in game as the `display_
 Once your character is created, you will see the character editor. This editor has 4 main sections.
 <img src="/media/character_editor.png" width="600"/>
 
-You can learn more about portraits, custom portraits and the character settings in this tutorial: *[Characters & Portraits](/documentation/characters-and-portraits)*
+You can learn more about portraits, custom portraits and the character settings in this tutorial: *[Characters & Portraits](characters-and-portraits.md)*
 
 ## 5. Adding the dialog to your game
 
 The last important step is to actually have this dialog show up in your game.
 
-For that we need two things to happen:
+For that, we need two things to happen:
 
 - A) having nodes that can display our timeline and
 - B) start the execution of the timeline.
 
 Luckily for us, Dialogic provides a method that does both of those: `Dialogic.start(@timeline_name_or_path)`
 
-*So code to start your dialog when an input is pressed could look like this:*
+*So the code to start your dialog when an input is pressed could look like this:*
 
 ```gdscript
-func _input(event:InputEvent):
+func _input(event: InputEvent):
     # check if a dialog is already running
     if Dialogic.current_timeline != null:
         return
@@ -104,11 +105,11 @@ func _input(event:InputEvent):
         get_viewport().set_input_as_handled()
 ```
 
-## You have gotten started!
+## You have got started!
 
-Congratulations! You now know the basics of dialogic. There is much more to learn though. Here is a list of tutorials you might want to explore next:
+Congratulations! You now know the basics of dialogic. There is much more to learn, though. Here is a list of tutorials you might want to explore next:
 
-- [Writing timelines in text format](./Timeline_Text_Syntax.md)
-- [Characters and Portraits](/documentation/characters-and-portraits)
-- [Creating timelines in code](/documentation/creating-timelines-in-code)
-- [Designing your own layout scene](/documentation/dialogic-nodes)
+- [Writing timelines in text format](timeline-text-syntax.md)
+- [Characters and Portraits](characters-and-portraits.md)
+- [Creating timelines in code](creating-timelines-in-code.md)
+- [Designing your own layout scene](dialogic-nodes.md)

theme/ayu-highlight.css

@@ -0,0 +1,71 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+/* Godot Engine Syntax Colors, optimised for ayu. */
+:root {
+  --dialogic_keyword-color: #aa7cff;
+  --background-color: #202531;
+  --text-color: #ccced3;
+  --code-tabs-background-color: #353c4c;
+  --symbol-color: #abc8ff;
+  --keyword-color: #ff7085;
+  --control_flow_keyword-color: #ff8ccc;
+  --base_type-color: #42ffc2;
+  --engine_type-color: #8effda;
+  --comment-color: grey;
+  --string-color: #ffeca1;
+  --number-color: #a1ffe0;
+  --function_definition-color:  #ccced3;
+  --decorator-color: #ffb373;
+  --monospace-font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, Courier, monospace;
+}
+
+
+code.hljs {
+    color: var(--text-color);
+    font-family: var(--monospace-font-family);
+    background-color: var(--background-color)
+}
+
+/* Godot specific highlight.js settings */
+code.hljs .hljs-decorator { color: var(--decorator-color); }
+code.hljs .hljs-dialogic_keyword { color: var(--dialogic_keyword-color); }
+
+
+code.hljs .hljs-symbol { color: var(--symbol-color); }
+
+code.hljs .hljs-keyword { color: var(--keyword-color); }
+
+code.hljs .hljs-control_flow_keyword { color: var(--control_flow_keyword-color); }
+
+code.hljs .hljs-base_type { color: var(--base_type-color); }
+
+code.hljs .hljs-engine_type { color: var(--engine_type-color); }
+
+code.hljs .hljs-comment { color: var(--comment-color); }
+
+code.hljs .hljs-string { color: var(--string-color)}
+
+code.hljs .hljs-number { color: var(--number-color); }
+
+code.hljs .hljs-title { color: var(--function_definition-color); }
+
+code.hljs .hljs-name,
+code.hljs .hljs-tag,
+code.hljs .hljs-attr {
+  color: var(--html-color);
+}
+
+code {
+  display: block;
+  position: relative;
+  font-size: 0.9em;
+  text-align: initial;
+  tab-size: 4;
+}
+
+.inline_code {
+  background-color: grey;
+  color: rgba(255, 255, 255, 0.75);
+  border: none;
+
+}

theme/highlight.css

@@ -0,0 +1,110 @@
+/*
+ * An increased contrast highlighting scheme loosely based on the
+ * "Base16 Atelier Dune Light" theme by Bram de Haan
+ * (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)
+ * Original Base16 color scheme by Chris Kempson
+ * (https://github.com/chriskempson/base16)
+ */
+
+/*
+* Godot Engine Syntax Colors, optimised for ayu, not all values are used in
+* theme.
+*/
+:root {
+    --dialogic_keyword-color: #aa7cff;
+    --background-color: #202531;
+    --text-color: #ccced3;
+    --code-tabs-background-color: #353c4c;
+    --symbol-color: #abc8ff;
+    --keyword-color: #ff7085;
+    --control_flow_keyword-color: #ff8ccc;
+    --base_type-color: #42ffc2;
+    --engine_type-color: #8effda;
+    --comment-color: grey;
+    --string-color: #ffeca1;
+    --number-color: #a1ffe0;
+    --function_definition-color:  #ccced3;
+
+    /* Optimised for this light theme: */
+    --decorator-color: #b95c11;
+    --monospace-font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, Courier, monospace;
+}
+
+/* Godot specific highlight.js settings */
+code.hljs .hljs-decorator { color: var(--decorator-color); }
+code.hljs .hljs-dialogic_keyword { color: var(--dialogic_keyword-color); }
+
+/* Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #575757;
+}
+
+/* Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #d70025;
+}
+
+/* Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #b21e00;
+}
+
+/* Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #008200;
+}
+
+/* Blue */
+.hljs-title,
+.hljs-section {
+  color: #516ddf;
+}
+
+/* Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #9d00ec;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f6f7f6;
+  color: #000;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-addition {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+
+.hljs-deletion {
+  color: #b31d28;
+  background-color: #ffeef0;
+}