Dvc.org: docs: support CSV/TSV language highlighting/autoformatting in Markdown

[jorgeorpinel]

UPDATE: Jump to https://github.com/iterative/dvc.org/issues/1390#issuecomment-638990359

---

I get warn Query takes too long: (among other warnings) several times when running yarn develop. Sometimes more, sometimes less. They seem to always be related to blog posts.

Here's an example:

...
warn code block language not specified in markdown. applying generic code block
warn unable to find prism language 'csv' for highlighting. applying generic code block
warn Query takes too long:
File path: C:/Users/poj12/dvc.org/src/templates/blog-home.tsx
URL path: /blog/page/3
Context: {
    "isBlog": true,
    "limit": 9,
    "pageInfo": {
        "currentPage": 3,
        "nextPage": "/blog/page/4",
        "previousPage": "/blog/page/2"
    },
    "skip": 16
}
warn Query takes too long:
File path: C:/Users/poj12/dvc.org/src/templates/blog-home.tsx
URL path: /blog/page/4
Context: {
    "isBlog": true,
    "limit": 9,
    "pageInfo": {
        "currentPage": 4,
        "previousPage": "/blog/page/3"
    },
    "skip": 25
}

[jorgeorpinel]

I guess the first 2 warnings are not about the blog. Since csv is not in https://prismjs.com/#supported-languages should we just remove that language from our block quotes and use plain ones?

[rogermparent]

The "long query" warnings are a feature introduced in a Gatsby patch update we upgraded to a bit ago- I get them too, and I'm pretty sure everyone will with our current setup. My personal computer doesn't have the warnings, but Heroku containers do- I'm pretty sure my computer's just fast enough to build these queries before they take long enough to trigger the warning.

The site's building as it did before, but unlike before it's warning us about the specific queries that take an above-average time to build. You can see it's usually blog indexes because those pages have the most image transforms: not only do we use gatsby-transformer-sharp for thumbnails, but there's actually two different big and small queries that make at least four transforms each, doubling the amount of transforms on an already transform-heavy page.

[jorgeorpinel]

OK so maybe we can just discuss about the CSV/TSV highlighting in this issue. Is it easy to add even when not supported by prism? It would be pretty useful for dvc plots examples.

[rogermparent]

@jorgeorpinel Seems like both Prism and the Gatsby plugin we use it with support adding custom language definitions. I can't imagine CSV/TSV would be too difficult to add to that, but the question is then what do we even highlight? Especially in TSV.

Alternatively, we could add a custom language for dvc plots examples specifically such that we highlight DVC-relevant data.

Another more advanced alternative would be to make a rich component that replaces csv and tsv type blocks, displaying the data in a table with something like a switch or toggle button to allow users to view/copy the code. Kind of like how GitHub previews csvs as a table.

[jorgeorpinel]

Glad to read that.

the question is then what do we even highlight?

Yeah good point. Just the headers and commas or tabs I guess... Ha. Probably not worth it unless the columns could actually be aligned to look like a table or transformed into an md table somehow — and I'm not sure we really need/want that.

rich component that replaces csv and tsv type blocks, displaying the data in a table with something like a switch or toggle button

Yes exactly. But I guess it's just a nice-to-have feature request at this point. Not a priority

[shcheklein]

rich component that replaces csv and tsv type blocks, displaying the data in a table with something like a switch or toggle button

the only thing I would do is may be some highlighting and font size, but we should not be transforming code blocks into anything fancy. Code blocks preserve the formatting, you should be able to copy/paste the value from them as is.

[jorgeorpinel]

GitHub previews csvs as a table

@rogermparent how can we see that, BTW? Here's a csv code block, it's not transformed:

h1,h2,h3
val1,val2,val3
val4,val5,val6

you should be able to copy/paste the value

A fancy widget could have a 📋 icon to copy the values.

But yeah again, I don't think something fancy is needed either. Maybe just a custom highlighter to align the columns (if possible), bold the headers, and color the commas, something like:

*h1* ,  *h2* ,  *h3*
val1 ,  val2 ,  val3
val4 ,  val5 ,  val6

[rogermparent]

@rogermparent how can we see that, BTW? Here's a csv code block, it's not transformed:

I meant when you open a .csv file in a repository, not in comments. Markdown and yaml files similarly display frontmatter. I don't think we have a csv in this repo, but Markdown files definitely do something similar with frontmatter. I could be misremembering this happening with CSV.

[rogermparent]

Here's an example of GitHub's rich CSV preview from another repo

[shcheklein]

Here's an example of GitHub's rich CSV preview from another repo

so, this is exactly a code block. Code blocks should be preserved for the reasons I mentioned above. I think we can apply only colors, fonts, may be some whitespaces but carefully.

A fancy widget could have a 📋 icon to copy the values.

I think we are breaking a convention here if we create something "fancy"