<>

Scroll Tutorial

Video walkthrough of this tutorial | Edit this file on try.scroll.pub

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

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.

Aftertext

Scroll invented something called aftertext, where you put markup after the text.

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

A link to Wikipedia

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 buildHtml() { return `<span onclick="alert('${this.get('message')}')">${super.buildHtml()}</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.

Built with Scroll v155.0.3