buggyrace / buggy-race-server

Race server and supporting material for running a "Buggy Racing" Python programming project
https://www.buggyrace.net
Other
1 stars 0 forks source link

Markdown for tasks does not support indent #204

Open mandyWW opened 6 months ago

mandyWW commented 6 months ago

Markdown with indents is not reflected in the task list when uploaded. For example, the following text will not be formatted nicely.

davewhiteland commented 6 months ago

I don't think this is a bug — it's a limitation of markdown (btw, the markdown conversion the race server is using is the PyPi markdown module, which is very widely-used).

I don't think there is a clean way in markdown to break a bullet list over several lines, including empty lines (because although the double-space-at-end-of-line markdown causes a line-break, if there's only whitespace on the line, markdown interprets that as the empty line which is ending the bullet list).

But... you can trick markdown into thinking a line is not empty (so doesn't end the indented block of a list item) by putting a space in backticks on the indented line, and then immediately ending the line with two spaces.

However, in the case of the task list, because this markdown is being rendered as text which itself is being presented to the browser, you can also drop HTML in there: either use <br> for a linebreak, or &nbsp; for the "non-breaking space": (note that to demonstrate the &nbsp; there are (invisible!) two spaces on the end of that line and one above it.

Here are all these dirty techniques being demonstrated:

* See the [tech note about localhost](%BUGGY_RACE_SERVER_URL%/tech_notes/localhost).

* It's best if you run in Flask's _development environment_ so that any changes you make to your code will be immediately reflected in the browser. To do that, you need to set the 
environment variable `FLASK_ENV` to `development` before you run `app.py`.
Once you've done this, it's good for the rest of the session.
  <br><br>
  In the VSCode terminal type `export FLASK_ENV=development`.  
  &nbsp;  
   When you get to task [3-ENV](http://rhul.buggyrace.net/project/tasks/3-ENV)
you'll investigate other ways of doing this.

* Next bullet point...  
  ` `  
  ...this is after one "empty": line, but still indented as
  part of the bullet point text. That works because the backticks
  are delimiting a space which markdown won't collapse, which itself
  is then followed by two empty spaces (marking a linebreak).
  Tricksy!

Here's a screenshot of that last bit with invisibles shown: note the two empty spaces on the end-of-line, which markdown renders as a linebreak if it can:

Screenshot 2024-03-26 at 13 57 48

...whole example resulting in:

Screenshot 2024-03-26 at 13 53 18

davewhiteland commented 6 months ago

...and if that's too horrible (because... markdown), actually you can just drop HTML in there, because markdown will generally pass it through), and that's how the task list is being handled. The catch then is to make sure you don't break the #, ## and ### headings, because the server is using those to parse the what-belongs-to-which-task structure of the file (and you might get some uglies depending on your HTML too, heh).

* <p>It's best if you run in Flask's _development environment_ so that any changes you make to your code will be immediately reflected in the browser. To do that, you need to set the 
environment variable `FLASK_ENV` to `development` before you run `app.py`.
Once you've done this, it's good for the rest of the session.
<br>
In the VSCode terminal type `export FLASK_ENV=development`.  
<br>
When you get to task [3-ENV](http://rhul.buggyrace.net/project/tasks/3-ENV)
you'll investigate other ways of doing this.
</p>

This works because the body of the list item is a paragraph... but that's hurts my markdowny eyes.