assets/

Static resource files.

Folder structure

assets/
|-- elements/
|-- images/
|-- prism/
    |-- prism.css
    `-- prism.js
`-- tutorials/

Table of Contents

• elements/
• images/
• prism/
  • Using Prism
  • Removing Prism
• tutorials/

elements/

Contains the element type thumbnail PNG files.

images/

Contains miscellaneous image files.

prism/

Contains the JS source and CSS styling for Prism, a syntax highlighter. Current as of September 3, 2020, this website uses Prism instead of Rouge, the default Jekyll syntax highlighter.

Using Prism

Prism is compatible with the Markdown backtick fenced code blocks:

example

      
```javascript
PennController.ResetPrefix(null)

newTrial("first-trial",
    newText("instructions", "Press the F key if the image on the left matches the sentence. Presss the K key if the image on the right matches the sentence.")
        .center()
        .italic()
        .print()
)
```

    

PennController.ResetPrefix(null)

newTrial("first-trial",
    newText("instructions", "Press the F key if the image on the left matches the sentence. Presss the K key if the image on the right matches the sentence.")
        .center()
        .italic()
        .print()
)

However, Prism diff highlighting is not compatible with the Markdown backticks.

To use JS diff highlighting:

• Surround the code block with <pre><code class="language-diff-javascript diff-highlight"> and </code></pre>.
• Add +, -, or * to the start of every line of the code block.
  • Start a line + to indicate an added line (adds a + and a green line highlight).
  • Start a line with - to indicate a deleted line (adds a - and a red line lightlight).
  • Start a line with ! to indicate a changed line (adds a ! and a yellow line highlight).
  • Start all other lines with *, otherwise that line will not receive syntax highlighting. This is likely an issue with the implementation of class="language-diff-javascript".
  • All spaces/indentation are in addition to the starting +, -, !, or * symbols. For example, if a line should be indented by 4 spaces, it should begin with *····, where · represents a space (5 characters total).

example

 
@PennController.ResetPrefix(null)
@
+newTrial("first-trial",
@    newText("instructions", "Press the F key if the image on the left matches the sentence. Press the K key if the image on the right matches the sentence.")
-        .center()
!        .italic()
@        .print()
@)

Removing Prism

Follow these steps to remove Prism and reenable Rouge:

1. Remove the Prism CSS styling by deleting the line <link rel="stylesheet" href="/pcibex/assets/prism/prism.css"> from the file ./_includes/head_custom.html.
   • If <link rel="stylesheet" href="/pcibex/assets/prism/prism.css"> is the only line in head_custom.html, you can also just delete the file head_custom.html.
2. Remove the Prism JS script by deleting the file ./_includes/footer_custom.html, which is an override of the original Just the Docs footer_custom.html file. Deleting the local copy of footer_custom.html will revert back to the original footer_custom.html layout.
3. Remove this section in _config.yml to reenable Rouge.

    # disable the Rouge syntax highlighter
    markdown: kramdown
    kramdown:
      syntax_highlighter_opts:
          disable : true
   

4. Modify all of the code blocks that used Prism syntax highlighting.

tutorials/

Contains the resource files used in the Basic Tutorial and Advanced Tutorial.