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 :)
: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!
. I am a normal text.I am a normal text.
.
away:I am a normal text.I am a normal text.
.
.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 daaI'm Blue da ba dee da ba daa
These are the types of attributes:
- class (normal braces
(
)
): The class of the element. By default there'shigh
andlow
. 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.
.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.
\
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) SectionsAlso, 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:
@ DocumentationNote 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:$myCustomClassEverything indented is part of the CSS class. You must define CSS classes before sections, and they must not be defined twice (case sensitive).
color: green;
font-size: medium;
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 ageAs you can see, you can use the parameters using
My name's <b >name> and I'm >age years old.
>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. My introduction is: <~introduction >John Smith >\>18> :)
My introduction is: My name's John Smith and I'm >18 years old. :)~-
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 |
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
ordark
.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 ♡