Stream: contributing

Topic: ✔ tutorial repl prompt


view this post on Zulip Anton (May 04 2024 at 14:35):

I believe we used to have a repl prompt symbol like » in our tutorial, but it's gone:
Screenshot_20240504_162728.png
Anybody know what might have happened?

view this post on Zulip Hristo (May 04 2024 at 20:43):

Seems like something must've changed with how the repl-prompt class gets handled :thinking:.

Based on snapshots from the Internet Archive, the most recently working version was from Nov 01, 2023. The following snapshot is from Nov 22, 2023 and the prompt is not present there.

This is the entire diff between the two dates. For instance, there appears to have occurred a migration from an older version of the website to a WIP version of the website, and the discrepancy might've occurred within that context, somewhere along the line.

There are a few suspicious changes which might've caused the discrepancy. I'll try to find some time tomorrow to do a bit more debugging. I'll try to iteratively build the tutorial for each commit in the aforementioned range and pinpoint the exact commit where the discrepancy occurred this way.

For reference, I think the code of the REPL prompt character (») is 0xbb, so it's possible that references to it might lead us to the culprit.

view this post on Zulip Hristo (May 05 2024 at 09:31):

It seems to me it might be a matter of re-defining (as it seems it's been removed since in this commit)

.repl-prompt:before {
    color: var(--repl-prompt);
    content: "» ";
}

along with the --repl-prompt: #0064ff; colour as well. I've just tested this out in the Developer Tools in the browser and it seems to be working as expected.
I'll raise a PR accordingly.

One possible caveat is that there seems to have used to be a TODO-like comment (removed together with the .repl-prompt CSS in the same commit) saying

/* Add this using CSS so it isn't selectable, which would be annoying when trying to copy/paste! */

which was probably meant to be addressed before removing the prompt altogether. Alternatively, it had been, in fact, addressed but then it might've broken otherwise since then.

I've also tested this behaviour with the aforementioned Developer Tools tweak, and it seems that when code is copied, the prompt doesn't get copied alongside. The output does nevertheless, but I believe that's expected behaviour.

Any feedback regarding the direction in which we'd like to take this would be welcome! :pray:

view this post on Zulip Hristo (May 05 2024 at 10:11):

PR here:

This re-adds the CSS corresponding to the REPL prompt in the tutorial section.

When code is copied, the prompt symbol (» ) doesn't get copied alongside the code, which matches the expected behaviour.

The behaviour has been tested by building the website locally and inspecting the output corresponding to the tutorial page.

view this post on Zulip Notification Bot (May 06 2024 at 09:18):

Hristo has marked this topic as resolved.


Last updated: Jul 06 2025 at 12:14 UTC