Dark Mode

This site supports a “dark mode” CSS feature. It is implemented through the variant selector in the menu to the left

Embed & Teleprompter

This site also creates two additional outputs of each page, also accessible from the upper toolbar:

• - Teleprompter View (add tele.html to the URL)
• - Embedded View (add embed.html to the URL)

Teleprompter View

The teleprompter view is intended to be used on a mirrored teleprompter. It uses some customized CSS in custom.css.

It also includes JavaScript code to handle automatically scrolling the page by clicking the mouse, and mirroring/unmirroring the output using the m button. Other buttons are programmed to match an IKAN bluetooth remote. See tele-scroll.js for details.

It also uses an override for the Hugo YouTube shortcode to hide any embedded YouTube videos. See /layouts/shortcodes/youtube.tele.html.

Embedded View

The embedded view renders the page without any additional navigation elements. This view is meant to be embedded in an <iframe> directly in another site, such as an LMS. It also removes any noiframe notices. See custom.css for details.

Line Numbers

Some code line numbering and highlighting can be enabled directly through the Highlight shortcode.

142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

function setAutoScroll(newValue) {
    if (newValue) {
        autoScrollSpeed = speedFactor * newValue;
    }
    if (autoScrollTimer) {
      clearInterval(autoScrollTimer);
    }
    autoScrollTimer = setInterval(function(){
        currentTime = Date.now();
        if (prevTime) {
            if (!isScrolling) {
                timeDiff = currentTime - prevTime;
                currentPos += autoScrollSpeed * timeDiff;
                if (Math.abs(currentPos - prevPos) >= minDelta) {
                    isScrolling = true;
                    elem = document.getElementById("body-inner");
                    elem.scrollTo(0, currentPos);
                    isScrolling = false;
                    prevPos = currentPos;
                    prevTime = currentTime;
                }
            }
        } else {
            prevTime = currentTime;
            isScrolling = false;
        }
    }, 1000 / fps);
}

PyScript

This theme now contains the PyScript libraries. This is a work in progress.

Example:

{{< pyscript >}}
print("Hello World")
name = input("What is your name? ")
print(f"Hello {name}!")
{{< /pyscript >}}

Renders as follows below

Debugging Script Output

<script type="py"  terminal   worker    >
  
print("Hello World")
name = input("What is your name? ")
print(f"Hello {name}!")

< /script >

Rendered Python Code

print("Hello World")
name = input("What is your name? ")
print(f"Hello {name}!")

PyScript Terminal