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 (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.
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.
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:
Scroll has headers like markdown:
# 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
parser to make tables:
table
printTable
data
Name,Rank
Scroll,#1
Markdown,#2
Name | Rank |
---|---|
Scroll | #1 |
Markdown | #2 |
To add an image use the image
parser:
https://scroll.pub/blog/screenshot.png
caption An image with a caption
You can make footnotes like this:
Pau means done^pau
^pau In Hawaiian
Pau means done[1]
[1] In Hawaiian
If you are building a dashboard you might want to try the dashboard
parser:
dashboard
#1 Lang
2k Users
300 Stars
#1Lang | 2kUsers | 300Stars |
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.
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
.
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
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.
Use the replace
parser to define macros. Macros 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
parser by just specifyingcthe path to the file, such as: header.scroll
Scroll ships with some default themes, which are just CSS files.
# This page has no theme
theme gazette
homeButton
viewSourceButton
This page uses the Gazette theme.
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
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
catchAllAtomType stringAtom
hiddenMessageParser
extends paragraphParser
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 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.