As part of the LIEAF 2022 Workshop on Creating Open Source Informatics Instructional Resources, we will transform a plain text file first into a markdown file.
After learning the basics of markdown, we will add more features using LiaScript.
In your forked copy of the PBJ repository:
- Make a copy of the
PBJ_text.txtfile. - Change file extension from
.txtto.md. - Rename the file if you want.
- Toggle the preview to the file you are editing using the "Open Preview" button in the upper right of the development screen. You can alternatively press
Command KthenVto open the side by side view.
- headings
- bold
- italics
block quotes
- bold-italics
- linking to websites
Images are similar to linking to websites, but require a ! in front of the square brackets.
- path to the image goes in the parentheses
- alt text for the image goes in the square brackets

The alt text describes the information and function of the image. A screen reader will announce "IMAGE" followed by your alt text. Learn more about about alt text from the World Wide Web Consortium.
- itemized lists
-
can use
-or*to denote items- indenting matters
- extra line before indented section
- enumerated lists
- the number
3.doesn't matter for markdown - but does for LiaScript
|notation- alignment using
:-:notation
This code
|Example | Table | Here |
| - | -: | :- |
|1 | 2 | 3 |
|a|b|c|
is rendered by markdown as this table:
| Example | Table | Here |
|---|---|---|
| 1 | 2 | 3 |
| a | b | c |
- generic code block: put
\``` on its own line both before and after the code. - specifying a language for code block highlighting: after the opening
\``include the name of the language like```pythonor```r` - inline code
code here
First you will need to install the LiaScript Previewer.
- Open the Extensions menu on the left side of screen using
ShiftCommandXor the menu button. - Enter "LiaScript" in the search bar.
- Select the
Installbutton under "LiaScript-Preview-Web" - Once the previewer is installed, the command
AltLwill now open the LiaScript previewer.
Navigate back to your .md file and type Alt L to open the previewer. Now you can start see how your course looks in LiaScript.
-
captions go in quotes:
-
Captions will be displayed
-
A caption tells information related to the image, supplemental to the image itself.
- Attribution
- Interpretation
- Commentary
-
-
images can be arrayed in a gallery
-
Other types of media can also be included:
!?[]()for video?[]()for audio files??[]()for multimedia files
Look at the buttons next to the two tables we already made:
- Bar charts/line graphs
- Pie chart
- Multiple choice (one or multiple correct answers use
[(X)]and[[X]]respectively) - Hints
[?] - Answers are our first look at incorporating html to push capabilities farther
<div class = "answer">
Text will be displayed after question is completed.
Include line breaks between <div>s and text.
</div>
-
Start document with a header:
<!-- metadata goes here --> -
Include metadata:
<!--
author: Elizabeth Drellich
email: drelliche@chop.edu
title: Workshop Agenda
version: 1.0
-->
-
LiaScript specific tags:
langague: ennarrator: UK English Female
-
Scripts and macros can also go in this header
Make sure you commit your work to GitHub!!!
Then...
-
Markdown renders on GitHub directly https://github.com/arcus/PBJ/blob/main/PBJ_liascript.md
-
Enter the url of your
.mdfile. For this "Agenda" file, that url is https://github.com/arcus/PBJ/blob/main/agenda.md -
Obtain rendered course.
You can share this rendered course directly with learners.
For this "Agenda" course, the link is https://liascript.github.io/course/?https://raw.githubusercontent.com/arcus/PBJ/main/agenda.md#1
