article.md- example of an article in supplescroll ``` --- TITLE: MY ARTICLE IN WINDOW TITLE BANNER: MY ARTICLE HEADING IN PAGE IS_RENAME: FALSE --- THIS IS MY ARTICLE IN MARKDOWN I will talk about the following things CODE FRAGMENT A code fragment
article.html- ingredients of an HTML page that talks to supplescroll. ```
` or `
` tags. It is important to note that if you want to display HTML-code, you need to escape special HTML characters (`<`, `&`). You can do this wiht an [HTML-escape sanitizer](http://www.freeformatter.com/html-escape.html). _Code Blocks_. This is to make large blocks of code that the reader might want to look at with the main text. Use `` for a multi-line block, and `
` for inline references. These will be wrapped in a scrollable style. Make sure you escape HTML tags. Here's an example:Code Fragment Labelwhich renders as [Code Fragment](#fig-code).Hello World <escaped tag&rt;Code Fragment_Images_. To insert photos with a label, you can add a label as text before the `` tag in the figure:Hello World <escaped tag>Photo Labelwhich gives [Photo Insert](#fig-photo).
Photo Insert_Youtube Embeds_. Text before the `` tag works as a figure label. `supplescroll` knows how to resize embeds properly:
Label to Youtube Videowhich renders as [Youtube Embedding](#fig-youtube).
Youtube Embedding### Figure links In the main text, links to figures are identified as relative links to `#fig*`. To link to the above few figures, we can type: - link to code (#fig-code), - link to photo (#fig-photo), - link to youtube (#fig-youtube). which will generate: - link to code (#fig-code), - link to photo (#fig-photo), - link to youtube (#fig-youtube). ### Automatic Figure Naming By default, `supplescroll` will assign a label to all figures `(Figure 1)` etc. and references `` etc. To turn this off, set `is_rename: false` field in the header ([example](#fig-markdown)). And make sure you fill in your preferred text. ### References References are similar to figures, in that you can push references into the third column, and back-links are generated. As such you list all your references in a `
` for a figure, which is illustrated with this code snippet (#fig-reference-code). Note the references are `` tags that are wrapped by a ``. This allows the correct placement of the reference back-link at the beginning of the ``. In the main text, links to a reference are written: Thus some text can be liberally sprinkled with a reference to: - google (#ref-1) - github (#ref-2) - boscoh (#ref-3) Thus some text can be liberally sprinkled with a reference to: - google (#ref-1) - github (#ref-2) - boscoh (#ref-3)example code for references<div id="fig-references"> <h1>References</h1> <div class="reference"> <a id="ref-1"></a>This is the detail to the linked reference, maybe it's a link<a href="http://boscoh.com">boscoh.com</a> </div> <div class="reference"> <a id="ref-2"></a>This is the detail to the linked reference, maybe it's a link<a href="http://boscoh.com">boscoh.com</a> </div> <div class="reference"> <a id="ref-3"></a>This is the detail to the linked reference, maybe it's a link<a href="http://boscoh.com">boscoh.com</a> </div> </div>