• This page is not part of the class and thus does not have learning objectives.
  • I added this page in order to retain examples of authoring pages.
  • I examine the text in the corresponding .md file to remember how to author specific techniques.
  • Example Site URLS

    For these next two links to work, I need to perform Managed Links, which uses urls.txt, _site/urls.txt, and _data/urls.yml. Then site.data.urls fetches the link information in the _data/urls.yml file.

    Link to an external site.

    Managed Links

    HTML Style Link to an internal page

    Algorithms.

    Markdown style link to an internal page.

    Algorithms

    Markdown style link to an internal page using baseurl, which does not work.

    Algorithms

    Example Superscript and Subscript

    O(n2)

    O(n2)

    Example Tooltip

    See _data/glossary.yml for defintion of gusty. Hover over gusty below.

    Gusty is my favorite teacher.

    Types of Alerts Available

    There are four types of alerts you can leverage:

    • note.html
    • tip.html
    • warning.html
    • important.html

    They function the same except they have a different color, icon, and alert word. You include the different types by selecting the include template you want. Here are samples of each alert:

    Font Awesome

    There are many font pictures defined at Font Awesome library. The following are various sizes of cameras.

    1x fa-lg fa-2x fa-3x fa-4x fa-5x

    You can mix Font Awesome with Alerts.

    Images

    You embed an image the same way you embed other files or assets: you put the file into a folder, and then link to that file.

    Put images inside the images folder in your root directory. You can create subdirectories inside this directory. Although you could use Markdown syntax for images, the HTML syntax is probably easier:

    The following is HTML syntax for an image.

    The following is Markup syntax for an image.

    My sample page

    The following is HTML syntax for an image with a caption

    A Jekyll Image

    Labels

    Labels might come in handy for adding button-like tags next to elements, such as POST, DELETE, UPDATE methods for endpoints. You can use any classes from Bootstrap in your content.

    Default Primary Success Info Warning Danger

    The following is a demo of a navtab. Refresh your page to see the tab you selected remain active.

    You must use HTML within the navtab content because each navtab section is surrounded with HTML, and you can’t use Markdown inside of HTML.

    Profile

    Praesent sit amet fermentum leo. Aliquam feugiat, nibh in u ltrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.

    About

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in u ltrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.about

    Match

    Vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.

    Tables

    The following is a Markdow Table

    Column 1 Column 2
    cell 1a cell 1b
    cell 2a cell 2b

    See Jekyll Doc Theme for fancy jQuery Table format.

    Code Syntax Highlight

    The markdown ```java looks as follows:

        public static void main(String[] args) {
          System.out.println("Hello");
        }
    

    Fenced code blocks require a blank line before and after.

        public static void main(String[] args) {
          System.out.println("Hello");
        }

    The theme has syntax highlighting specified in the configuration file as follows:

    highlighter: rouge
    

    The syntax highlighting is done via the css/syntax.css file.