Usage Guide

Creating a basic page

After installing the plugin, navigate to the plugins/Delphi/ folder. Then to the modules folder (Create it, if it doesn’t exist).

In the modules folder, create another folder called helloworld.

There, create a file named index.xml and open it with your preferred code editor.

All Delphi pages use <delphi> as their root tag. You can then specify a <head> and <body> element inside that. For this example though, we’re just going to make a small “Hello, world!” page.

The index.xml should look like this, with a our content inside the <body> element:


<delphi>
  <body>
    <h1>Hello, world!</h1>
  </body>
</delphi>

Save the file and then, in game, we can do /delphi open @s helloworld to spawn the page.

Applying basic style

Now, lets center the “Hello, world!” on the page. For this, we’ll need to create a new style.scss file in the same folder as our index.xml.

If you’re familiar with how CSS and styling works on the web, then this should be easy to understand.

We’ll need to add the <head> element to the index.xml to link the style. We do this by adding a <style src="./style.scss"/> element to that header, and then adding a class to the <h1> the hello world was declared in.

The end result should look like this:


<delphi>
  <head>
    <style src="./style.scss"/>
  </head>
  <body>
    <h1 class="centered">Hello, world!</h1>
  </body>
</delphi>


.centered {
  margin-left: auto;
  margin-right: auto;
}