What is SMSH?

Short overview of what SMSH is

SMSH stands for Simple Markup for Styled HTML.
It's essentially a easy and fast to write markup language that you can use to write a pretty and structured HTML document.

What it's for

SMSH is mostly for writing documents and notes, however it is not made for writing fully interactive webpages.
SMSH handles the sections, the HTML tags and more, making them all much easier to write and to read.
Since SMSH simply compiles to HTML (with some predefined CSS included), anyone can just open up the compiled HTML in their web browser, without the need for any install, setup, unzip, etc.

Notes

Information about me and this project

I made this mostly for writing notes in school, but hey, why not publish it. I'm a 16 year old programmer from Austria and you can learn more about me on my website. I'm looking forward to adding more features, check to-do.html in the repo for things I'm planning on!
If you'd like to donate to me and be the first person to do so, you can do so on ko-fi. Thanks for checking this smaller project out :)

Compiler

About the compiler and how to use it

The SMSH compiler is written in C#, and you can download it on GitHub.
Here you can also find the source code, together with the code used to generate this documentation, which, by the way, is also written in SMSH.

Compiler usage

Argument 1 is for the input file, and there is an optional argument -o for the output file, which defaults to filename.html.

Element syntax

How to write elements

SMSH goes from top to bottom. Empty lines and lines containing nothing but whitespaces are completely ignored. You can define a whole element by doing .tag, and then writing the text body after it like this:

.h4 I am a simple header :)

I am a simple header :)

Alternatively, you can put everything in a line lower with one tab as indentation (use :spaces [spaces] to use spaces instead), like this:

.h4
    I am also a simple header. 
    However, you can give me multiple lines!

I am also a simple header.
However, you can give me multiple lines!

The most common element you'll use is the normal text element, and it doesn't have a tag:

. I am a normal text.

I am a normal text.

Unless it's a child of an element, you can even leave the . away:

I am a normal text.

I am a normal text.

Or you could choose to have your element be only text, in which case you don't need ..
By default text makes linebreaks, however if you put a \ at the end of your line, there will not be a linebreak set. Just like in HTML, you can also set linebreaks manually using <br>.
You can also nest elements:

.ul
    .li
        .h4 Headers...
    .li
        .h4 ...in lists!

Headers...
...in lists!

Extra elements

There are some elements that you can only define at the start of your page. Instead of using a . character, these elements use the : symbol.
If you make a line that starts with a , symbol, it acts as a margin-bottom (you can put the size after it, defaults to 16px or 1 (2 would be 2x margin)).
Lines that start with > get completely ignored and act as comments.

Element attributes

Attributes for elements, for styling and links

When you have an element, you can add attributes next to the tag:

.b[color:blue] I'm Blue da ba dee da ba daa

I'm Blue da ba dee da ba daa

Attributes are applied left to right and must be after the tag. The order does not matter. Spaces inside attributes are allowed.

These are the types of attributes:

class (normal braces ( )): The class of the element. By default there's high and low. Here you can use your custom classes.
style (square brackets [ ]): Custom CSS styling of the element.
link (curly braces { }): The link of the element. Used mainly for links .a and images .img (image source, rest of the text is alt text). When clicked, the links will open in a new tab.

So you can embed the funny Garfield comic that I keep forgetting about like this:

.img{https://i.kym-cdn.com/photos/images/original/002/346/435/f06.jpg} Garfield comic

Element inline

Define elements inside of text

You can also put elements inside of lines, by wrapping them in corner braces (< >). The first argument is the element, the rest is the text.
Note that you don't have to include a . before the element for inline.
Here's an example:

. I'm normal. <b I'm bold.> <i I'm italic.> <[color: yellow] I'm piss.> <(high) I'm high priority.> <code I'm code.>

I'm normal. I'm bold. I'm italic. I'm piss. I'm high priority. I'm code.

Hint: Put a \ before < or > to escape them and write them as normal characters.

Sections

Structure the file into sections which show in the sidebar

You can define a section by having a line starting with a # symbol.
This will automatically add the title for that section and add the section to the sidebar on the left, so you're able to click on it to jump to it.
If you do not want a default title, put two hashes ## at the start instead of one #.
If you put something right after the # in braces ( ), it will be the description of the section. This is the dark gray text you see under the sections, and also gets shown when you hover over the section's sidebar item. This is optional.
Here's what this section ("Sections") looks like:

#(Structure the file into sections which show in the sidebar) Sections

Also, note that special elements cannot be defined under sections.

Tabs

Structure the file into tabs which show at the top of the page

Tabs are similar to sections, but they use the @ symbol instead.
This will add the title to the navigation bar at the top of the page. Only one tab can be visible at a time, if you click on one tab the other ones, including their sidebars get hidden.
Here's what this tab ("Documentation") looks like:

@ Documentation

Note that you can either have no tabs and therefore no navigation bar at all, or you can use them and have to put the first tab before the first element.

Custom CSS classes

How to define your own CSS classes to be used

You can create custom CSS classes using the $ prefix. Here is an example:

$myCustomClass
    color: green;
    font-size: medium;

Everything indented is part of the CSS class. You must define CSS classes before sections, and they must not be defined twice (case sensitive).
Example usage of above class

Templates

Use templates to avoid duplication

Templates are snippets of text that can be used multiple times with certain values being different. They use the ~ symbol.
You can define an element using ~+, followed by its name and the parameter's names. Then the value is put indented after it.
For example:

~+introduction name age
    My name's <b >name> and I'm >age years old.

As you can see, you can use the parameters using >parameter inside the template.

You can then access the template using just ~, with the parameter values put after > symbols:

~introduction >Filip >16 and a half

My name's Filip and I'm 16 and a half years old.

This also works inline:

My introduction is: <~introduction >John Smith >\>18> :)

My introduction is: My name's John Smith and I'm >18 years old. :)

You can then delete templates using ~- and the template name:

~-introduction

Note: Inline tags are currently not supported as parameter values.

Multiple files

Import other SMSH files in your document

To import another file into your SMSH document, you can use the ! operator. Put the name of the file after it, the .smsh extension is optional.
This will act as though you have added the file's contents to the document.
For example, say have a file called hello.smsh which is just one line:

Hello, world!

You can then add this file to your main SMSH like this:

!hello

You can also add a single file multiple times.

Elements

A list of the most common SMSH elements

SMSH supports pretty much every HTML tag out there, to some degree at least. However, these are the most common ones:

Header 1 `.h1` (Default for sections)

Header 2 `.h2`

Header 3 `.h3`

Header 4 `.h4`

Normal text ./
high text .(high)
low text .(low)
Link a{"https://..."}
code .code

Multi-line code block .pre

Unordered list

unordered list
unordered list
- nested

.ul
    .li 
        . unordered list
    .li 
        . unordered list
        .ul 
            .li nested

unordered list shorthand

.uli unordered list shorthand

Ordered list

ordered list
ordered list

.ol
    .li ordered list
    .li ordered list

ordered list shorthand

.oli ordered list shorthand

Table

table	row	header
table	row	data
table	row	data
table	row	data
table	row	data

.table 
    .tr
        .th table
        .th row
        .th header
    .tr 
        .td table
        .td row
        .td data
> ...

table row shorthand

.row
    .td table row shorthand
.row
    .td table row shorthand

Card .card

Special elements

A list of all available special elements

Special elements are elements that change the way the output HTML looks like, or how the compiler reads SMSH. They can be used to, for example, change the title of the HTML document.
A special element starts with : and must be defined before any elements or sections.
Here's a list of all the special elements available:

title (title): Set the title of the document.
Here:
```
:title SMSH-Documentation
```
theme (theme): Set the colors of the document, either light or dark.
Here:
```
:theme dark
```
toTopText text: Set the text shown when hovering over the ^ button at the bottom right of the screen.
```
:toTopText Back to top
```
hideCredit: Removes the message shown at the bottom of the page.
spaces amount: Tells the compiler to use spaces as a substitute for tabs. Put a number after :spaces to specify the amount, (4 if you're using Visual Studio Code).
Note that this is the only special element you don't need to put before all elements. This means you can put them in SMSH imports and not have them break depending on the main file.
Here:
```
:spaces 4
```
font font: The CSS font that gets used.
Here:
```
:font Arial
```
favicon href: Link to the favicon (the icon text to the document title).
Here:
```
:favicon https://www.ascyt.com/projects/smsh/favicon.ico
```
initialHash value: The hash that gets used when none is specified (when the HTML is opened initially). Don't write the # symbol, just write the number.
Here:
```
:initialHash 0
```

This file has been generated using SMSH, a fast, easy and open-source markup language used to write a pretty and structured HTML document. Learn More | Donate ♡

What is SMSH?

What it's for

Notes

Compiler

Compiler usage

Element syntax

I am a simple header :)

I am also a simple header. However, you can give me multiple lines!

Headers...

...in lists!

Extra elements

Element attributes

These are the types of attributes:

Element inline

Sections

Tabs

Custom CSS classes

Templates

Multiple files

Elements

Header 1 .h1 (Default for sections)

Header 2 .h2

Header 3 .h3

Header 4 .h4

Unordered list

Ordered list

Table

Special elements

Here:

Here:

Here:

Here:

Here:

Here:

I am also a simple header.
However, you can give me multiple lines!

Header 1 `.h1` (Default for sections)

Header 2 `.h2`

Header 3 `.h3`

Header 4 `.h4`