Like Markdown, Scroll is a plaintext language that compiles to HTML.
Scroll is minimal to help you reduce your ideas to their essence.
Scroll is extensible to help you use and build new mini languages to fully develop your ideas.
Scroll debuted in 2021 and is now on Version 72, approximately 1 release every 2 weeks. There is no official spec yet but creating a spec is on the roadmap.
This Tutorial will walk you through most keywords in Scroll AND teach you how to build your own Scroll keywords.
A Scroll document (or "program") is a list of nodes. Every node is one line and every line is one node.
If you put a space at the beginning of a line, that line becomes a child of the preceding line. You have probably seen this indent trick before in languages like Python. But Scroll pushes it to the max.
If you master the indent trick, you master Scroll. But we're getting ahead of ourselves, let's start with the basics.
Let's start with the most common node, the thought
node. You can think of this node as similar to a p
or div
tag in HTML. To use this node you can write out the word thought
, or use an asterisk *
, OR just start any text that does not begin with a keyword. This paragraph you are reading is written using one of these nodes. The code is:
Let's start with the most common node, the `thought` node. You can think of this node as similar to a `p` or `div` tag in HTML. To use this node you can write out the word `thought`, or use an asterisk `*`, OR just start any text that does not begin with a keyword. This paragraph you are reading is written using one of these nodes. The code is:
There are a few types of headers in scroll. Let's show the 3 main ones and what they generate:
title This is a title
# This is a section header
## This is a subsection header
Here's how you write unordered lists:
- Scroll has lists
- That can be nested
Below is the code for a checklist and its rendered version:
[] Finish full tutorial
[x] Learn that checklists support nesting
Use the table
keyword and include your delimiter for tables:
table ,
Name,Rank
Scroll,#1
Markdown,#2
Name | Rank |
---|---|
Scroll | #1 |
Markdown | #2 |
To add an image use the image
keyword:
image https://scroll.pub/blog/screenshot.png
caption An image with a caption
An image with a caption
You can make footnotes like this:
Pau means done^pau
^pau In Hawaiian
Pau means done1
1 In Hawaiian ⮐
If you are building a dashboard you might want to try the dashboard
keyword:
#1Lang | 2kUsers | 300Stars |
html
keyword.
html If you need to jump into regular HTML, use the <code>html</code> keyword.
For CSS, use the css
keyword:
css .green {color: green;}
This text should be green.
class green
This text should be green.
Formatting text is similar to Markdown or Textile.
Here's how to *bold*, _italicize_, or denote `code`.
Here's how to bold, italicize, or denote code
.
Scroll does links different. Instead of mixing in the link with the content, you put the link after the text along with the text you want the link to match against. For example:
A link to Wikipedia
https://wikipedia.org Wikipedia
A link to Wikipedia
You can also make the whole paragraph a link by not including any text to match against.
A link to Wikipedia
https://wikipedia.org
You can use the startColumns [maxNumberOfColumns]
keyword to start a columns flow and endColumns
to end a columns flow. If you don't want a section to break across columns, don't put line breaks in between lines. Line breaks will clear sections.
Use the replace
keyword to define variables. Variables definitions are parsed and removed on the first compiler pass.
Our domain is: scroll.pub
Scroll files can import other Scroll files. Use the import
keyword followed by the path to the file, such as: import header.scroll
A standard Scroll Theme consists of CSS and may also contain suggested pages and additional Grammar extensions. The default scroll theme is called Gazette
. The checklist below walks you through creating a complete Scroll Theme like Gazette.
gazetteCssParser
in gazetteTheme.grammar
for an example. Your theme can extend abstractThemeCssParser
or be its own tag.By default Scroll emits HTML with no theming. To use any theme—including the default Gazette
theme—the user simply uses the keywords provided by the theme, such as gazetteCss
.
# This page has no theme
gazetteCss
pageHeader
* This page uses the Gazette theme.
pageFooter
Scroll is based on the theory that a language should adapt to the domain, not the other way around. So Scroll has extendibility built-in.
Note: Custom Parsers are currently only supported using the npm
package. The web editor does not currently support custom keywords.
You can define your own parsers right in your Scroll documents using *Parser
. These Parsers are written in the Grammar
language.
Here is a simple example that extends Scroll by making p
work the same as *
:
pParser
extends thoughtParser
crux p
p We can then make paragraphs using `p`.
We can then make paragraphs using p
.
Let's now make a hiddenMessage
Parser that alerts a message when clicked:
messageParser
cruxFromId
catchAllCellType stringCell
hiddenMessageParser
extends thoughtParser
inScope messageParser
cruxFromId
javascript
compile() {
return `<span onclick="alert('${this.get('message')}')">${super.compile()}</span>`
}
hiddenMessage Click me.
message Hello world
Click me.
As you can see, you can define new parsers with a small amount of code. You probably also can see that the Grammar Langauge is powerful but has lots of sharp edges. While the documentation on Grammar evolves, feel free to get in touch for help in adding your own parsers.