Strapdown.js: Directory Structure

How to set up strapdown.js to display HTML files locally

nick3499
1 min readDec 6, 2017

Using the tree utility, a file structure was displayed below. Pay attention to the fact that the JS library directory path starts with /v/0.2/, where it is plain to see that most are CSS files. Themes mainly.

.
├── foo.html
├── img
│ └── foo.png
├── template.html
└── v
└── 0.2
├── strapdown.css
├── strapdown.js
└── themes
├── amelia.min.css
├── bootstrap-responsive.min.css
├── cerulean.min.css
├── cyborg.min.css
├── journal.min.css
├── readable.min.css
├── simplex.min.css
├── slate.min.css
├── spacelab.min.css
├── spruce.min.css
├── superhero.min.css
└── united.min.css

An example of template.html is shown below. The <xmp> tag is required:

<!DOCTYPE html>
<html>
<title>Title Phrase Goes Here</title>
<xmp theme="united">
### Markdown Subtitle
_Standard_ **markdown** text can be entered here.
</xmp>
<script src="v/0.2/strapdown.js"></script>
</html>

Several themes are available: amelia, cerulean, cyborg, journal, readable, simplex, slate, spacelab, spruce, superhero and united. Simply replace the theme property value shown below:

<xmp theme="amelia">

Pay attention to the fact that the directory name 0.2 represents the current version. The following URLs can be used to download needed files:

http://strapdownjs.com/v/0.2/strapdown.js
http://strapdownjs.com/v/0.2/strapdown.css
http://strapdownjs.com/v/0.2/themes/amelia.min.css
http://strapdownjs.com/v/0.2/themes/bootstrap-responsive.min.css
http://strapdownjs.com/v/0.2/themes/cerulean.min.css
http://strapdownjs.com/v/0.2/themes/cyborg.min.css
http://strapdownjs.com/v/0.2/themes/journal.min.css
http://strapdownjs.com/v/0.2/themes/readable.min.css
http://strapdownjs.com/v/0.2/themes/simplex.min.css
http://strapdownjs.com/v/0.2/themes/slate.min.css
http://strapdownjs.com/v/0.2/themes/spacelab.min.css
http://strapdownjs.com/v/0.2/themes/spruce.min.css
http://strapdownjs.com/v/0.2/themes/superhero.min.css
http://strapdownjs.com/v/0.2/themes/united.min.css

wget or curl utility can be used to download the files linked above directly into their appropriate directories. For example:

cd v/0.2/
wget http://strapdownjs.com/v/0.2/strapdown.js

Alternative

Instead of storing local files, the script tag <script src="v/0.2/strapdown.js"></script> can be changed to the following:

<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>

Which would eliminate the need for any local .css and .js files.

--

--

nick3499
nick3499

Written by nick3499

coder of JavaScript and Python

No responses yet