What is Scroll?
Scroll is a new computer language that evolved from taking one question very seriously: what if you removed every unnecessary stroke from a language? What if you made a language as simple as possible?
Scroll is the result of relentlessly pursuing those questions.
This tutorial will walk you through the basics of using Scroll.
A Scroll document
A Scroll document (or "program") is a list of lines.
Each line can contain content (or "atoms").
For example, here is a line containing 3 atoms:
title Hello world
In addition to containing atoms, each line can have its own document with its own lines using indentation.
When you add a space at the beginning of a line, that line becomes a "subparticle" of the parent line.
image hello.png
caption This line is a subparticle of the line above.
You may have seen this indent trick before in languages like Python.
But Scroll pushes it to the max.
Master the indent trick and master Scroll.
But we're getting ahead of ourselves, let's start with the basics.
Parsers
Every line in a Scroll document matches and is parsed by a Parser.
You can see all the available parsers in the Scroll Leet Sheet.
(Advanced users who want to write their own parsers might want to checkout the Parsers Leet Sheet.)
Let's walk through some of the most common parsers.
Basic Lines
1. The Paragraph Parser
Let's start with the most common parser, the paragraph parser.
You can think of paragraphs as similar to a p or div tag in HTML.
To use this parser you can write out the atom paragraph, or use an asterisk *, OR just start any text that does not match another parser (the "catch all" parser of a Scroll program is the paragraph parser).
This paragraph was compiled by the catch all paragraph parser. The code is:
This paragraph was compiled by the catch all paragraph parser. The code is:
2. Headers
Scroll has headers like markdown:
# This is a section header
## This is a subsection header
This is a section header
This is a subsection header
3. Unordered lists
Here's how you write unordered lists:
- Scroll has lists
- That can be nested
- Scroll has lists
- That can be nested
4. Checklists
Below is the code for a checklist and its rendered version:
[] Finish full tutorial
[x] Learn that checklists support nesting
5. Tables
Use the table parser to make tables:
table
printTable
data
Name,Rank
Scroll,#1
Markdown,#2
| Name | Rank |
|---|---|
| Scroll | #1 |
| Markdown | #2 |
6. Images
To add an image use the image parser:
https://scroll.pub/blog/screenshot.png
caption An image with a caption
An image with a caption
7. Footnotes
You can make footnotes like this:
Pau means done^pau
^pau In Hawaiian
Pau means done[1]
[1] In Hawaiian
8. Dashboard
If you are building a dashboard you might want to try the dashboard parser:
dashboard
#1 Lang
2k Users
300 Stars
| #1Lang | 2kUsers | 300Stars |
9. Including HTML and CSS
If you need to jump into regular HTML, use the `html` parser.html If you need to jump into regular HTML, use the `html` parser.
For CSS, use the css parser:
css .green {color: green;}
This text should be green.
class green
This text should be green.
Marking Up Text
Inline markups
You can use inline markups similar to Markdown or Textile.
Here's how to *bold*, _italicize_, or denote `code`.
Here's how to bold, italicize, or denote code.
HTML markups
You can use also markup text using HTML.
Here's how to <b>bold</b>.
Here's how to bold.
For example, 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
Columns
You can use the thinColumns [maxNumberOfColumns] parser 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.
Advanced
Variables
Use the replace parser to define macros. Macros definitions are parsed and removed on the first compiler pass.
Our domain is: scroll.pub
Import statements
Scroll files can import other Scroll files. Use the import parser by just specifyingcthe path to the file, such as: header.scroll
Themes
Scroll ships with some default themes, which are just CSS files.
Examples
A page using no theme:
# This page has no theme
A page using a theme:
theme gazette
homeButton
editButton
This page uses the Gazette theme.
Expert: Adding your own parsers
Note: Custom Parsers are currently only supported using the npm package. The web editor does not currently support custom parsers.
You can define your own parsers right in your Scroll documents using *Parser.
Here is a simple example that extends Scroll by making p work the same as *:
pParser
extends paragraphParser
cue 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
cueFromId
catchAllAtomType stringAtom
hiddenMessageParser
extends paragraphParser
inScope messageParser
cueFromId
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 Parsers code is powerful but has lots of sharp edges.
While the documentation on Parsers evolves, feel free to get in touch for help in adding your own parsers.