carpentries / carpentries/pegboard
Report HTML blocks that are accidentally terminated by white space
- Dominant language
- R
- Stars
- 6
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
I recieved a bug report for an error that occurs in {pegboard} with pasted HTML. This should be caught when parsing divs and reported to the user.
---
When building a website using this template, I get the following error message:
```
arguments imply differing number of rows: 842, 28
Section (div) tags for 02-preparing-data.md will not be labelledFALSE
── Validating Fenced Divs ──────────────────────────────────────────────────────
Error in data.frame(node = rep(seq_along(divs), lengths(divs)), div = unlist(divs, :
arguments imply differing number of rows: 842, 28
Calls: ... -> label_div_tags -> make_div_pairs -> data.frame
In addition: Warning messages:
1: In lines[!fenced_divs] <- rep(get_linestart(nodes[!fenced_divs]), :
number of items to replace is not a multiple of replacement length
2: In lines[!fenced_divs] <- rep(get_linestart(nodes[!fenced_divs]), :
number of items to replace is not a multiple of replacement length
Execution halted
Error: Process completed with exit code 1.
```
See [github action logs](https://github.com/esciencecenter-digital-skills/lesson-machine-learning-intro/runs/8107730687?check_suite_focus=true)
[Here](https://github.com/esciencecenter-digital-skills/lesson-machine-learning-intro/blob/039b37ca678db3cb4318350a0bc4e7ee126230d4/episodes/02-preparing-data.md) is the file that I am trying to render. Locally it sometimes builds successfully, and sometimes I get the same error, I haven't figured out in which cases it is successful.
What could it be? And maybe it would be nice to add a more user-friendly error message.
---
My response:
Thank you for the report (especially for including a copy of the error message and pointing to the permanent link to your episode :100:), @svenvanderburg!
This indeed is a bug as it _is_ possible to include HTML in a lesson, but one catch with HTML blocks (especially for `
## Solution
The solution is to remove [the blank lines (288 and 292) in the `` tag](https://github.com/esciencecenter-digital-skills/lesson-machine-learning-intro/blob/039b37ca678db3cb4318350a0bc4e7ee126230d4/episodes/02-preparing-data.md?plain=1#L288)
## Details of how this error occured
This is coming from {pegboard}, which uses the commonmark 0.29 spec (which is the foundation for pandoc markdown) for parsing documents. HTML blocks are allowed, but [as stated in the spec](https://spec.commonmark.org/0.29/#html-block), blank lines signal the end of a block (emphasis mine):
> There are two reasons for disallowing [blank lines within HTML blocks] here. First, it removes the need to parse balanced tags, which is expensive and can require backtracking from the end of the document if no matching end tag is found. Second, it provides a very simple and flexible way of including Markdown content inside HTML tags: simply separate the Markdown from the HTML using blank lines [see [example 157](https://spec.commonmark.org/0.29/#example-157)]...
>
> ... The main potential drawback is that one can no longer paste HTML blocks into Markdown documents with 100% reliability. However, in most cases this will work fine, because the blank lines in HTML are usually followed by HTML block tags. [see [example 159](https://spec.commonmark.org/0.29/#example-159)] **There are problems, however, if the inner tags are indented and separated by spaces, as then they will be interpreted as an indented code block** [see [example 160](https://spec.commonmark.org/0.29/#example-160)].
This was the situation your lesson found itself. [As you can see in the HTML output of this preview][live-preview], [because of the blank line](https://spec.commonmark.org/0.29/#example-160), the style block is parsed into three separate code blocks:
```markdown
Output:
<div>
<style scoped>
.dataframe tbody tr th:only-of-type {
vertical-align: middle;
}
.dataframe tbody tr th {
vertical-align: top;
}
.dataframe thead th {
text-align: right;
}
```
```html
Output:
.dataframe tbody tr th:only-of-type {
vertical-align: middle;
}
<pre><code>.dataframe tbody tr th {
vertical-align: top;
}
.dataframe thead th {
text-align: right;
}
</code></pre>
```
[live-preview]:https://spec.commonmark.org/dingus/?text=%0AAnd%20let%27s%20look%20at%20the%20%60labels%60%20data%3A%0A%60%60%60python%0Aweather_labels.head()%0A%60%60%60%0A%0AOutput%3A%0A%3Cdiv%3E%0A%3Cstyle%20scoped%3E%0A%20%20%20%20.dataframe%20tbody%20tr%20th%3Aonly-of-type%20%7B%0A%20%20%20%20%20%20%20%20vertical-align%3A%20middle%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20.dataframe%20tbody%20tr%20th%20%7B%0A%20%20%20%20%20%20%20%20vertical-align%3A%20top%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20.dataframe%20thead%20th%20%7B%0A%20%20%20%20%20%20%20%20text-align%3A%20right%3B%0A%20%20%20%20%7D%0A%3C%2Fstyle%3E%0A%3Ctable%20border%3D%221%22%20class%3D%22dataframe%22%3E%0A%20%20%3Cthead%3E%0A%20%20%20%20%3Ctr%20style%3D%22text-align%3A%20right%3B%22%3E%0A%20%20%20%20%20%20%3Cth%3E%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EDATE%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EBASEL_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EBUDAPEST_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EDE_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EDRESDEN_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EDUSSELDORF_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EHEATHROW_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EKASSEL_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3ELJUBLJANA_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EMAASTRICHT_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EMALMO_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EMONTELIMAR_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EMUENCHEN_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EOSLO_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3EPERPIGNAN_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3ESONNBLICK_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3ESTOCKHOLM_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%20%20%3Cth%3ETOURS_BBQ_weather%3C%2Fth%3E%0A%20%20%20%20%3C%2Ftr%3E%0A%20%20%3C%2Fthead%3E%0A%20%20%3Ctbody%3E%0A%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%3Cth%3E0%3C%2Fth%3E%0A%20%20%20%20%20%20%3Ctd%3E20000101%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%3Cth%3E1%3C%2Fth%3E%0A%20%20%20%20%20%20%3Ctd%3E20000102%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%3Cth%3E2%3C%2Fth%3E%0A%20%20%20%20%20%20%3Ctd%3E20000103%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%3Cth%3E3%3C%2Fth%3E%0A%20%20%20%20%20%20%3Ctd%3E20000104%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%3Cth%3E4%3C%2Fth%3E%0A%20%20%20%20%20%20%3Ctd%3E20000105%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%20%20%3Ctd%3EFalse%3C%2Ftd%3E%0A%20%20%20%20%3C%2Ftr%3E%0A%20%20%3C%2Ftbody%3E%0A%3C%2Ftable%3E%0A%3C%2Fdiv%3E%0A%0AWe%20can%20inspect%20the%20shape%20of%20the%20data%3A%0A%60%60%60python%0Aprint(weather_labels.shape)%0A%60%60%60
_Originally posted by @zkamvar in https://github.com/carpentries/workbench/issues/29#issuecomment-1232985857_
Contributor guide
Research direction
Start with the label_div_tags and make_div_pairs entry points named in the error, then compare their handling of HTML blocks with the CommonMark 0.29 HTML-block specification. Reproduce the failure using the linked 02-preparing-data.md example and verify that whitespace-terminated blocks produce a user-friendly parsing error instead of the data.frame failure.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- r
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100