Externally rendered markdown broken by 867f46f

[HarvsG]

• Gitea version (or commit ref):
• Git version:
• Operating system:
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (provide example URL)
  • No
  • Not relevant
• Log gist:

Description

Somewhere between gitea version 1.8.2 and master the display of rendered html has changed in the repo view.

both using the same render command: RENDER_COMMAND = "jupyter nbconvert --stdout --to html --template full "
In both cases nbconvert==5.6.0
In the latest version it passes the HTML as below with class=jupyter, this results in unstyled HTML

<div class="file-view jupyter has-emoji">
  <div id="notebook">
    <div id="notebook-container">

However, previously it would pass class=markdown which would maintain styling:

<div class="file-view markdown has-emoji">
  <div id="notebook">
    <div id="notebook-container">

Using the chrome inspector to edit the class from jupyter to markdown fixes this and returns styling.

The culprit line appears to be line

gitea/routers/repo/view.go

Line 288 in c6fb7fe

ctx.Data["MarkupType"] = markupType

added 1 month ago in 867f46f. This was a fix for #7868 (pull request #7869).

A quick fix would be to change the above line to:
ctx.Data["MarkupType"] = markupType + " markdown".

...

Screenshots

Current appearance in master.

Old appearance in v1.82 or after adding class=markdown in master

[HarvsG]

The other possible solution would be to edit

gitea/templates/repo/view_file.tmpl

Line 48 in 867f46f

<div class="file-view {{if .IsMarkup}}{{.MarkupType}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}} has-emoji">

to:
<div class="file-view {{if .IsMarkup}}{{.MarkupType}} markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}} has-emoji">

However both of these solutions run the risk of creating class=markdown markdown which is not very elegant.

[HarvsG]

Paging @noerw, would either of these mess with what you achieved in #7869 and #7868?

[lunny]

@HarvsG Please send a PR.

[noerw]

@HarvsG Hej, I was not aware that the markdown CSS class would be needed for other types than .md files. If thats the case, reusing this class for multiple formats seems kinda hacky and is hard to follow while reading the code. I changed the behaviour, so that custom styling for CSV files would be possible while making the gitea template more structured.

If the old behaviour should be restored, I'd propose to introduce a new styling class for each markupType eg html, and rename the markdown class to something more generic (external-render?).
While more hacky, your quick fix would mostly preserve the current behaviour for CSV files (just larger margins around the table afaik).

[HarvsG]

@noerw, Agreed. However the current markdown class does quite a good job of turning the plain HTML put out by by renderers such as pandoc and nbconvert into attractive formatting.

Perhaps we could create a copy of the current markdown class called something like html, external-render or markup and instead pass that as the default in

gitea/templates/repo/view_file.tmpl

Line 48 in 867f46f

<div class="file-view {{if .IsMarkup}}{{.MarkupType}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}} has-emoji">

E.g
<div class="file-view {{if .IsMarkup}}markup {{.MarkupType}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}} has-emoji">

markup would have the elegant result of allowing users to write their own custom CSS in the format of .markup.asciidoc or .markup.csv which is exactly the same format that the custom renderers are specified in app.ini

gitea/custom/conf/app.ini.sample

Lines 797 to 804 in c6fb7fe

	[markup.asciidoc]
	ENABLED = false
	; List of file extensions that should be rendered by an external command
	FILE_EXTENSIONS = .adoc,.asciidoc
	; External command to render all matching extensions
	RENDER_COMMAND = "asciidoc --out-file=- -"
	; Don't pass the file on STDIN, pass the filename as argument instead.
	IS_INPUT_FILE = false

@noerw If you think this is a good idea, would you would be able to help me with the CSS changes as my CSS is weak, much less my 'less' skills.

[noerw]

Your proposal sounds good, but refactoring this will need some elaborate manual testing (or is there a frontend test suite?).
So I'd revert the problematic change for now (so this affects only csv rendering in a minor way, I can send a PR this week), and do a proper refactor of the CSS classes as a second step.

[lunny]

So let's sent two PRs. One for bug fix and another for a refactoring. :)

[HarvsG]

@noerw, thank you for doing this in #8357, should we now explore the idea of the more general markup class and switching to this?

[HarvsG]

@noerw I have opened a PR to work on this: #12261