Use a generic markup class to display externally rendered files and diffs #12261

HarvsG · 2020-07-16T14:17:13Z

This PR will be a follow-on from #8299 and #7614.

It builds on the work done in #8300 and the patch #8357

The idea is to have a generic class .markup that has some default rendering, that is near identical to the current .markdown
The current .markdown is defined at

https://github.com/go-gitea/gitea/blob/master/web_src/less/_markdown.less

and overwritten at:

gitea/web_src/less/themes/theme-arc-green.less

Lines 851 to 885 in 84a419d

    
           .markdown:not(code) .highlight pre, 
        
           .markdown:not(code) pre { 
        
               background-color: #2a2e3a; 
        
               border: 1px solid #404552; 
        
           } 
        
           .markdown:not(code) table tr:nth-child(2n) { 
        
               background-color: #2a2e39; 
        
           } 
        
           .markdown:not(code) table tr:nth-child(2n-1) { 
        
               background-color: #383b44; 
        
           } 
        
           .markdown:not(code) table thead tr:nth-child(2n-1) { 
        
               background-color: #464c5d !important; 
        
           } 
        
           .markdown:not(code) table td, 
        
           .markdown:not(code) table th { 
        
               border-color: #4c505c !important; 
        
           } 
        
           .repository.file.editor.edit, 
        
           .repository.wiki.new .CodeMirror { 
        
               .editor-preview, 
        
               .editor-preview-side, 
        
               & + .editor-preview-side { 
        
                   background: #353945; 
        
                   .markdown:not(code).ui.segment { 
        
                       border-width: 0; 
        
                   } 
        
               } 
        
           }

and

gitea/web_src/less/themes/theme-arc-green.less

Lines 1856 to 1867 in 84a419d

    
           .markdown:not(code) h1 { 
        
               border-bottom-color: #888; 
        
           } 
        
           .markdown:not(code) blockquote { 
        
               border-left-color: #888; 
        
           } 
        
           .markdown:not(code) code, 
        
           .markdown:not(code) tt { 
        
               background-color: #2a2e3a; 
        
           }

HarvsG · 2020-07-16T14:40:35Z

The below shows how a markup renderer gets from the admin's .ini file to being used and presented in the view_file.tmpl with the appropriate CSS

The styling is then invoked by:

gitea/templates/repo/view_file.tmpl

Line 67 in 9542b73

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

Meaning that if it isMarkup the output will have the classes .markdown and the dynamic {{.MarkupType}}

Where that dynamic class is obtained here

gitea/routers/repo/view.go

Lines 466 to 468 in 9542b73

    
           if markupType := markup.Type(blob.Name()); markupType != "" { 
        
           	ctx.Data["IsMarkup"] = true 
        
           	ctx.Data["MarkupType"] = markupType

or

gitea/routers/repo/view.go

Lines 512 to 516 in 9542b73

    
           if markupType := markup.Type(blob.Name()); markupType != "" { 
        
           	d, _ := ioutil.ReadAll(dataRc) 
        
           	buf = append(buf, d...) 
        
           	ctx.Data["IsMarkup"] = true 
        
           	ctx.Data["MarkupType"] = markupType

Using the markup.Type() function:

gitea/modules/markup/markup.go

Line 109 in 9542b73

func Type(filename string) string {

which uses the GetParserByFileName() function

gitea/modules/markup/markup.go

Lines 53 to 56 in 9542b73

    
           func GetParserByFileName(filename string) Parser { 
        
           	extension := strings.ToLower(filepath.Ext(filename)) 
        
           	return extParsers[extension] 
        
           }

Which finds the file extension in a list of valid parsers:

gitea/modules/markup/markup.go

Lines 24 to 27 in 9542b73

    
           extParsers = make(map[string]Parser) 
        
           for _, parser := range parsers { 
        
           	for _, ext := range parser.Extensions() { 
        
           		extParsers[strings.ToLower(ext)] = parser

Which are each registered by the RegisterParser function

gitea/modules/markup/markup.go

Line 45 in 9542b73

func RegisterParser(parser Parser) {

Which is called here:

gitea/modules/markup/external/external.go

Lines 21 to 25 in 704da08

    
           // RegisterParsers registers all supported third part parsers according settings 
        
           func RegisterParsers() { 
        
           	for _, parser := range setting.ExternalMarkupParsers { 
        
           		if parser.Enabled && parser.Command != "" && len(parser.FileExtensions) > 0 { 
        
           			markup.RegisterParser(&Parser{parser})

Which is parsed from the app.ini file:

gitea/modules/setting/markup.go

Lines 126 to 132 in 1bf9e44

    
           ExternalMarkupParsers = append(ExternalMarkupParsers, MarkupParser{ 
        
           	Enabled:        sec.Key("ENABLED").MustBool(false), 
        
           	MarkupName:     name, 
        
           	FileExtensions: exts, 
        
           	Command:        command, 
        
           	IsInputFile:    sec.Key("IS_INPUT_FILE").MustBool(false), 
        
           })

HarvsG · 2020-07-16T14:51:54Z

So the todo for the PR looks something like:

Add similar overwrites to gitea/web_src/less/themes/theme-arc-green.less .markdown: by someone who knows it better than me @noerw? - doesnt appear to be necessary
Create a copy of _markdown.less called _markup.less with the renamed class
Edit

gitea/templates/repo/view_file.tmpl

Line 67 in 9542b73

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

and

gitea/templates/repo/settings/lfs_file.tmpl

Line 15 in 4ed7d2a

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

to use the new class markup as the default styling for markup files
Test adding custom styling to externally rendered code (e.g .docx) by an admin creating a .markup.word CSS/Less styling example
- where the ini looks like:

[markup.word]
ENABLED = true
FILE_EXTENSIONS = .docx
RENDER_COMMAND = "pandoc -f docx -t html "
IS_INPUT_FILE = true

Update the docs with a tutorial on how to use (almost) any external renderer to display file types :)

codecov-commenter · 2020-07-16T15:21:58Z

Codecov Report

❗ No coverage uploaded for pull request base (master@6ea2701). Click here to learn what that means.
The diff coverage is n/a.

HarvsG · 2020-07-20T16:49:58Z

Hmm the command make unit-test-coverage test-check runs with no errors for me (on an amd64 device). Can we re-run the CI @lunny?

lunny · 2020-07-21T05:16:21Z

Hmm the command make unit-test-coverage test-check runs with no errors for me (on an amd64 device). Can we re-run the CI @lunny?

Restarted.

HarvsG · 2020-07-21T12:06:17Z

Typical use with screenshots

Native appearance of .ipynb files in gitea:

Install our converter software of choice on the gitea machine

sudo apt install python-pip
pip install nbconvert

jupyter nbconvert --stdout --to html --template full path/to/some/test/notebook.ipynb

If we open the resulting .html file in a browser we get something that looks like:

This looks promising.....

add this it custom/conf/app.ini:

[markup.jupyter]
ENABLED = true
FILE_EXTENSIONS = .ipynb
RENDER_COMMAND = "jupyter nbconvert --stdout --to html --template full "
IS_INPUT_FILE = true

[markup.sanitizer.jupyter0]
; jupyter chiefly uses divs
ELEMENT = div
ALLOW_ATTR = class
REGEXP =

Appearance with styling inherited from the markup class - this is identical to the previous styling it would have got from the markdown class:

Since the CSS is stripped from the nbconvert output I removed and combined all the inline css, put it in a less file, wrapped the whole thing in .markup.jupyter{} and put the less file (~~hopefully~~ it is generic) in custom/public/css/jupyter.less

I then added to custom/templates/header.tmpl

<link rel="stylesheet/less" type="text/css" href="{{AppSubUrl}}/css/jupyter.less" />
<script src="//cdn.jsdelivr.net/npm/less" ></script>

Final appearance with the .markup.jupyer custom styling

Because the less is targetted at this div

HarvsG · 2020-07-21T13:10:56Z

I would imagine that many external renderers produce inline styling. It would be cool if the santizer could automatically extract, combine and scope the styles.

Something to try another day.

lunny · 2020-07-21T13:17:52Z

@HarvsG Great example for juypter render. Could you add an example on docs or could you save the comment as an article to our blog https://gitea.com/gitea/blog as a PR after merged?

lunny · 2020-07-21T13:21:23Z

You can customerize allowed class and attributes via [markup.sanitizer.TeX] on app.ini

HarvsG · 2020-07-21T16:50:42Z

@HarvsG Great example for juypter render. Could you add an example on docs or could you save the comment as an article to our blog https://gitea.com/gitea/blog as a PR after merged?

Hi @lunny, the PR contains a new how-to in the Docs here. I will create a PR request for the blog once we have merged.

Draft blog post

silverwind · 2020-08-01T17:03:03Z

I'm not comfortable with removing the .markdown class and I don't really understand why this is has to be renamed to "markup". It's still a markdown source and I think we want to stay compatible with .markdown as that is used on a lot of websites like GitHub that render markdown.

silverwind · 2020-08-01T17:05:34Z

web_src/less/_markup.less

@@ -0,0 +1,496 @@
+.markup:not(code) {


Why does it need a:not()? I'd prefer not to have that here. It adds CSS specificity (which makes styles harder to override) not to mention probably a few hundret bytes of CSS.

I have to agree with @silverwind here. Why is there a :not(code) here? There must be some way to prevent this from being needed.

Actually I think this is existing baggage with the .markdown:not(code) selector. Not ideal that it's there, but no dealbreaker I guess and we can clean that up separately.

silverwind · 2020-08-01T17:09:56Z

Oh and I don't get why this has to duplicate _markdown.css. Duplication should be avoided at all costs. I'd rather just use https://github.com/sindresorhus/github-markdown-css for the markdown styling.

silverwind

Duplication should be eliminated.
Compatibilty with .markdown class should not be broken.

lunny · 2020-08-02T10:05:49Z

@silverwind Since markdown will not be the only supported file format to render. We should have markup and markdown, orgmode, csv the four class defaultly. And when a third-party renderer added, user could add a new class with that renderer's name. This change should compitable with before.

silverwind · 2021-04-17T16:59:42Z

Need to resolve #12261 (comment) before landing.

6543

as per comment

HarvsG · 2021-04-17T20:17:21Z

Need to resolve #12261 (comment) before landing.

@6543 @silverwind Should now be fixed in 29a2f09

stale&resolved

6543 · 2021-04-18T13:04:06Z

@lafriks @silverwind this pull is ready to review ;)

silverwind · 2021-04-19T17:20:02Z

web_src/js/markdown/anchors.js

@@ -16,7 +16,7 @@ function scrollToAnchor() {
 }

 export default function initMarkdownAnchors() {
-  if (!document.querySelector('.markdown')) return;
+  if (!document.querySelector('.markup')) return;


Probably also need to update headingSelector a few lines above. The fact that this change was necessary makes me suspicious thought, because I thought we'd have both classes present, e.g. markup markdown.

Keeping both classes was my original proposition, but it was decided against because of duplication. #12261 (comment)

silverwind

If we swap markdown class to markup, we need to do replace all these matches:

$ egrep -ir class.+markdown templates | wc -l
32
$ egrep -ir class.+markdown web_src/js | wc -l
3

6543 · 2021-04-21T17:09:52Z

If we swap markdown class to markup, we need to do replace all these matches:
$ egrep -ir class.+markdown templates | wc -l
32
$ egrep -ir class.+markdown web_src/js | wc -l
3

hmm I think this can be a next pull?
since this one did took it's time and will conflict so quick - a followup is the better choice in my opinion

@silverwind am I allowed to merge?

silverwind · 2021-04-21T17:41:00Z

I would not. It breaks markdown rendering in a lot of places in the UI with this halfway class rename (issue and pr comments, milestones, releases).

silverwind · 2021-04-21T17:59:15Z

Here is a patch of the cases I found in templates and web_src/js:

diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 9b77ae6b3..5e0a53aa5 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -10,9 +10,9 @@
 					{{if .Org.Visibility.IsPrivate}}<div class="ui large basic horizontal label">{{.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
 				</span>
 				{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}}
 			</div>
-			{{if $.RenderedDescription}}<p class="render-content markdown">{{$.RenderedDescription|Str2html}}</p>{{end}}
+			{{if $.RenderedDescription}}<p class="render-content markup">{{$.RenderedDescription|Str2html}}</p>{{end}}
 			<div class="text grey meta">
 				{{if .Org.Location}}<div class="item">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
 				{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
 			</div>
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 4408d5257..187531f12 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -157,9 +157,9 @@
 					</div>
 					<div class="ui bottom attached active write tab segment">
 						<textarea class="review-textarea" tabindex="1" name="content"></textarea>
 					</div>
-					<div class="ui bottom attached tab preview segment markdown">
+					<div class="ui bottom attached tab preview segment markup">
 					{{$.i18n.Tr "loading"}}
 					</div>
 					<div class="text right edit buttons">
 						<div class="ui basic blue cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
index c82d32c21..43e902bc8 100644
--- a/templates/repo/diff/comment_form.tmpl
+++ b/templates/repo/diff/comment_form.tmpl
@@ -21,14 +21,14 @@
 		<div class="field">
 			<div class="ui active tab" data-tab="write">
 				<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
 			</div>
-			<div class="ui tab markdown" data-tab="preview">
+			<div class="ui tab markup" data-tab="preview">
 			{{.i18n.Tr "loading"}}
 			</div>
 		</div>
 		<div class="field footer">
-			<span class="markdown-info">{{svg "octicon-markdown"}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span>
+			<span class="markdown-info">{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}</span>
 			<div class="ui right">
 				{{if $.reply}}
 					<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
 					<input type="hidden" name="reply" value="{{$.reply}}">
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index b566ffce9..6e39fbe85 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -50,9 +50,9 @@
 				{{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "issue" false "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
 			</div>
 		</div>
 		<div class="ui attached segment comment-body">
-			<div class="render-content markdown">
+			<div class="render-content markup">
 			{{if .RenderedContent}}
 				{{.RenderedContent|Str2html}}
 			{{else}}
 				<span class="no-content">{{$.root.i18n.Tr "repo.issues.no_content"}}</span>
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index 3efde70f5..b7e1589aa 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -43,9 +43,9 @@
 						data-line-wrap-extensions="{{.LineWrapExtensions}}">
 {{.FileContent}}</textarea>
 					<div class="editor-loading is-loading"></div>
 				</div>
-				<div class="ui bottom attached tab segment markdown" data-tab="preview">
+				<div class="ui bottom attached tab segment markup" data-tab="preview">
 					{{.i18n.Tr "loading"}}
 				</div>
 				<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
 					{{.i18n.Tr "loading"}}
diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl
index 7dae7c012..21c600545 100644
--- a/templates/repo/empty.tmpl
+++ b/templates/repo/empty.tmpl
@@ -26,9 +26,9 @@
 							<div class="ui divider"></div>
 
 							<div class="item">
 								<h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3>
-								<div class="markdown">
+								<div class="markup">
 									<pre><code>touch README.md
 git init
 {{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
 git add README.md
@@ -40,9 +40,9 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 							<div class="ui divider"></div>
 
 							<div class="item">
 								<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3>
-								<div class="markdown">
+								<div class="markup">
 									<pre><code>git remote add origin <span class="clone-url">{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}</span>
 git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 								</div>
 							</div>
diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl
index ab874bdd1..77e82930d 100644
--- a/templates/repo/issue/comment_tab.tmpl
+++ b/templates/repo/issue/comment_tab.tmpl
@@ -7,9 +7,9 @@
 		<textarea id="content" class="edit_area js-quick-submit" name="content" tabindex="4" data-id="issue-{{.RepoName}}" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.Repo.RepoLink}}">
 			{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
 		</textarea>
 	</div>
-	<div class="ui bottom tab markdown" data-tab="preview">
+	<div class="ui bottom tab markup" data-tab="preview">
 		{{.i18n.Tr "loading"}}
 	</div>
 </div>
 {{if .IsAttachmentEnabled}}
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 8c2f36f04..897d297d3 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -4,9 +4,9 @@
 	<div class="ui container">
 		<div class="ui three column stackable grid">
 			<div class="column">
 				<h1>{{.Milestone.Name}}</h1>
-				<div class="markdown content">
+				<div class="markup content">
 					{{.Milestone.RenderedContent|Str2html}}
 				</div>
 			</div>
 			<div class="column center aligned">
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index c7d3522ab..448d758e3 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -97,9 +97,9 @@
 							<a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.i18n.Tr "repo.issues.label_delete"}}</a>
 						</div>
 					{{end}}
 					{{if .Content}}
-						<div class="markdown content">
+						<div class="markup content">
 							{{.RenderedContent|Str2html}}
 						</div>
 					{{end}}
 				</li>
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 0482604b7..e353d71ee 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -56,9 +56,9 @@
 							{{end}}
 						</div>
 					</div>
 					<div class="ui attached segment comment-body">
-						<div class="render-content markdown">
+						<div class="render-content markup">
 							{{if .Issue.RenderedContent}}
 								{{.Issue.RenderedContent|Str2html}}
 							{{else}}
 								<span class="no-content">{{.i18n.Tr "repo.issues.no_content"}}</span>
@@ -190,9 +190,9 @@
 		<div class="field">
 			<div class="ui bottom active tab write">
 				<textarea tabindex="1" name="content"></textarea>
 			</div>
-			<div class="ui bottom tab preview markdown">
+			<div class="ui bottom tab preview markup">
 				{{$.i18n.Tr "loading"}}
 			</div>
 		</div>
 		{{if .IsAttachmentEnabled}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 81f0d0434..4863f7f2f 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -63,9 +63,9 @@
 						{{end}}
 					</div>
 				</div>
 				<div class="ui attached segment comment-body">
-					<div class="render-content markdown">
+					<div class="render-content markup">
 						{{if .RenderedContent}}
 							{{.RenderedContent|Str2html}}
 						{{else}}
 							<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
@@ -441,9 +441,9 @@
 							{{$.i18n.Tr "repo.issues.review.left_comment" | Safe}}
 						</span>
 					</div>
 					<div class="ui attached segment comment-body">
-						<div class="render-content markdown">
+						<div class="render-content markup">
 							{{if .RenderedContent}}
 								{{.RenderedContent|Str2html}}
 							{{else}}
 								<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
@@ -551,9 +551,9 @@
 															{{end}}
 														</div>
 													</div>
 													<div class="text comment-content">
-														<div class="render-content markdown">
+														<div class="render-content markup">
 														{{if .RenderedContent}}
 															{{.RenderedContent|Str2html}}
 														{{else}}
 															<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
@@ -738,9 +738,9 @@
 								{{$.i18n.Tr "action.review_dismissed_reason"}}
 							</span>
 						</div>
 						<div class="ui attached segment">
-							<div class="render-content markdown">
+							<div class="render-content markup">
 								{{if .RenderedContent}}
 									{{.RenderedContent|Str2html}}
 								{{else}}
 									<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index ce4de3ddf..8f5a3c832 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -130,9 +130,9 @@
 									<span class="time">{{TimeSinceUnix .CreatedUnix $.Lang}}</span> |
 								{{end}}
 								<span class="ahead"><a href="{{$.RepoLink}}/compare/{{.TagName | EscapePound}}...{{.Target}}">{{$.i18n.Tr "repo.release.ahead.commits" .NumCommitsBehind | Str2html}}</a> {{$.i18n.Tr "repo.release.ahead.target" .Target}}</span>
 							</p>
-							<div class="markdown desc">
+							<div class="markup desc">
 								{{Str2html .Note}}
 							</div>
 							<div class="ui accordion download">
 								<h2 class="title {{if eq $idx 0}}active{{end}} df ac mb-0">
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index 8489d8959..c4b36597c 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -52,9 +52,9 @@
 					</div>
 					<div class="ui bottom active tab" data-tab="write">
 						<textarea name="content">{{.content}}</textarea>
 					</div>
-					<div class="ui bottom tab markdown" data-tab="preview">
+					<div class="ui bottom tab markup" data-tab="preview">
 						{{$.i18n.Tr "loading"}}
 					</div>
 				</div>
 				{{range .attachments}}
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index 0bc585886..fbb97db4a 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -60,9 +60,9 @@
 				<p>{{.FormatWarning}}</p>
 			</div>
 		{{end}}
 		<div class="ui {{if .sidebarPresent}}grid equal width{{end}}" style="margin-top: 1rem;">
-			<div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markdown">
+			<div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markup">
 				{{.content | Str2html}}
 			</div>
 			{{if .sidebarPresent}}
 			<div class="column" style="padding-top: 0;">
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index 18f3c9f6d..29da93349 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -35,9 +35,9 @@
 								</li>
 							{{end}}
 							{{if $.RenderedDescription}}
 								<li>
-									<div class="render-content markdown">{{$.RenderedDescription|Str2html}}</div>
+									<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
 								</li>
 							{{end}}
 							{{range .OpenIDs}}
 								{{if .Show}}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 1716df9e7..9992020e8 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1473,9 +1473,9 @@ function initWikiForm() {
             context: $editArea.data('context'),
             text: plainText,
             wiki: true
           }, (data) => {
-            preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
+            preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
             renderMarkdownContent();
           });
         };
 
@@ -1553,9 +1553,9 @@ function initWikiForm() {
             hasSimpleMDE = false;
             const $form = $('.repository.wiki.new .ui.form');
             const $root = $form.find('.field.content');
             const loading = $root.data('loading');
-            $root.append(`<div class="ui bottom tab markdown" data-tab="preview">${loading}</div>`);
+            $root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
             initCommentPreviewTab($form);
           },
           className: 'fa fa-file',
           title: 'Revert to simple textarea',
diff --git a/web_src/js/markdown/anchors.js b/web_src/js/markdown/anchors.js
index 62561fe25..b25fddc59 100644
--- a/web_src/js/markdown/anchors.js
+++ b/web_src/js/markdown/anchors.js
@@ -1,7 +1,7 @@
 import {svg} from '../svg.js';
 
-const headingSelector = '.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6';
+const headingSelector = '.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6';
 
 function scrollToAnchor() {
   if (document.querySelector(':target')) return;
   if (!window.location.hash || window.location.hash.length <= 1) return;

lunny · 2021-04-22T05:04:39Z

Should we still keep markup and markdown? For those places which always use markdown, i.e. issue/comment/description, we could keep as markdown. For other places which maybe another markup language, we can use markup or markup with that language name.

silverwind · 2021-04-22T08:24:05Z

Generally I think it's unnecessary to have both classes but if we want to do something in JS/CSS specific to markdown, it would be good to have dual classes, so I'm not opposed to doing it now.

GitHub is a btw a rather bad example on this, they have .markdown-body on .rst files.

Also, it's possible that there are third-party integrations that work based of the .markdown class which would break with single .markup class, so that'd be another reason for dual class.

6543 · 2021-05-02T12:36:59Z

can you sorry again resolve conflicts :/

silverwind · 2021-05-03T08:34:37Z

Above patch also needs to be merged to fix markdown rendering all over the place. Maybe someone should raise another PR with the patch merged.

lunny · 2021-05-05T11:33:38Z

Please resolve the conflicts.

6543 · 2021-05-05T15:42:22Z

-> #15735

6543 · 2021-05-07T08:44:30Z

@HarvsG merged as 6400668

HarvsG marked this pull request as draft July 16, 2020 14:18

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jul 16, 2020

HarvsG mentioned this pull request Jul 16, 2020

Externally rendered markdown broken by 867f46f #8299

Closed

7 tasks

a1012112796 mentioned this pull request Jul 16, 2020

Codecov doesn't seem to be working properly #12262

Closed

7 tasks

HarvsG closed this Jul 18, 2020

HarvsG force-pushed the markup branch from f47ca82 to 6ea2701 Compare July 18, 2020 13:51

HarvsG reopened this Jul 18, 2020

HarvsG marked this pull request as ready for review July 18, 2020 23:19

lunny added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI labels Jul 19, 2020

lunny added this to the 1.13.0 milestone Jul 19, 2020

HarvsG mentioned this pull request Jul 21, 2020

Client side rendering of .ipynb has not been ported from gogs #3279

Closed

lunny approved these changes Jul 22, 2020

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jul 22, 2020

silverwind reviewed Aug 1, 2020

View reviewed changes

silverwind requested changes Aug 1, 2020

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Apr 17, 2021

6543 requested changes Apr 17, 2021

View reviewed changes

fix header navigation

29a2f09

HarvsG requested review from 6543 and silverwind April 17, 2021 20:19

6543 approved these changes Apr 18, 2021

View reviewed changes

Merge branch 'master' into markup

dabed52

silverwind reviewed Apr 19, 2021

View reviewed changes

Merge branch 'master' into markup

2bef1fe

HarvsG requested a review from silverwind April 20, 2021 13:31

silverwind requested changes Apr 21, 2021

View reviewed changes

6543 mentioned this pull request May 5, 2021

Use a generic markup class to display externally rendered files and diffs #15735

Merged

6543 closed this May 5, 2021

6543 removed this from the 1.15.0 milestone May 5, 2021

go-gitea locked and limited conversation to collaborators Oct 19, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use a generic markup class to display externally rendered files and diffs #12261

Use a generic markup class to display externally rendered files and diffs #12261

HarvsG commented Jul 16, 2020 •

edited

Loading

HarvsG commented Jul 16, 2020

HarvsG commented Jul 16, 2020 •

edited

Loading

codecov-commenter commented Jul 16, 2020

HarvsG commented Jul 20, 2020

lunny commented Jul 21, 2020

HarvsG commented Jul 21, 2020 •

edited

Loading

HarvsG commented Jul 21, 2020

lunny commented Jul 21, 2020

lunny commented Jul 21, 2020

HarvsG commented Jul 21, 2020 •

edited

Loading

silverwind commented Aug 1, 2020 •

edited

Loading

silverwind Aug 1, 2020

zeripath Oct 10, 2020

silverwind Oct 14, 2020 •

edited

Loading

silverwind commented Aug 1, 2020 •

edited

Loading

silverwind left a comment

lunny commented Aug 2, 2020

silverwind commented Apr 17, 2021

6543 left a comment

HarvsG commented Apr 17, 2021

6543 commented Apr 18, 2021

silverwind Apr 19, 2021 •

edited

Loading

HarvsG Apr 19, 2021

silverwind left a comment •

edited

Loading

6543 commented Apr 21, 2021

silverwind commented Apr 21, 2021 •

edited

Loading

silverwind commented Apr 21, 2021 •

edited

Loading

lunny commented Apr 22, 2021

silverwind commented Apr 22, 2021 •

edited

Loading

6543 commented May 2, 2021

silverwind commented May 3, 2021

lunny commented May 5, 2021

6543 commented May 5, 2021

6543 commented May 7, 2021

	.markdown:not(code) .highlight pre,
	.markdown:not(code) pre {
	background-color: #2a2e3a;
	border: 1px solid #404552;
	}

	.markdown:not(code) table tr:nth-child(2n) {
	background-color: #2a2e39;
	}

	.markdown:not(code) table tr:nth-child(2n-1) {
	background-color: #383b44;
	}

	.markdown:not(code) table thead tr:nth-child(2n-1) {
	background-color: #464c5d !important;
	}

	.markdown:not(code) table td,
	.markdown:not(code) table th {
	border-color: #4c505c !important;
	}

	.repository.file.editor.edit,
	.repository.wiki.new .CodeMirror {
	.editor-preview,
	.editor-preview-side,
	& + .editor-preview-side {
	background: #353945;

	.markdown:not(code).ui.segment {
	border-width: 0;
	}
	}
	}

	.markdown:not(code) h1 {
	border-bottom-color: #888;
	}

	.markdown:not(code) blockquote {
	border-left-color: #888;
	}

	.markdown:not(code) code,
	.markdown:not(code) tt {
	background-color: #2a2e3a;
	}

Use a generic markup class to display externally rendered files and diffs #12261

Use a generic markup class to display externally rendered files and diffs #12261

Conversation

HarvsG commented Jul 16, 2020 • edited Loading

HarvsG commented Jul 16, 2020

HarvsG commented Jul 16, 2020 • edited Loading

codecov-commenter commented Jul 16, 2020

Codecov Report

HarvsG commented Jul 20, 2020

lunny commented Jul 21, 2020

HarvsG commented Jul 21, 2020 • edited Loading

Typical use with screenshots

HarvsG commented Jul 21, 2020

lunny commented Jul 21, 2020

lunny commented Jul 21, 2020

HarvsG commented Jul 21, 2020 • edited Loading

silverwind commented Aug 1, 2020 • edited Loading

silverwind Aug 1, 2020

Choose a reason for hiding this comment

zeripath Oct 10, 2020

Choose a reason for hiding this comment

silverwind Oct 14, 2020 • edited Loading

Choose a reason for hiding this comment

silverwind commented Aug 1, 2020 • edited Loading

silverwind left a comment

Choose a reason for hiding this comment

lunny commented Aug 2, 2020

silverwind commented Apr 17, 2021

6543 left a comment

Choose a reason for hiding this comment

HarvsG commented Apr 17, 2021

6543 commented Apr 18, 2021

silverwind Apr 19, 2021 • edited Loading

Choose a reason for hiding this comment

HarvsG Apr 19, 2021

Choose a reason for hiding this comment

silverwind left a comment • edited Loading

Choose a reason for hiding this comment

6543 commented Apr 21, 2021

silverwind commented Apr 21, 2021 • edited Loading

silverwind commented Apr 21, 2021 • edited Loading

lunny commented Apr 22, 2021

silverwind commented Apr 22, 2021 • edited Loading

6543 commented May 2, 2021

silverwind commented May 3, 2021

lunny commented May 5, 2021

6543 commented May 5, 2021

6543 commented May 7, 2021

HarvsG commented Jul 16, 2020 •

edited

Loading

HarvsG commented Jul 16, 2020 •

edited

Loading

HarvsG commented Jul 21, 2020 •

edited

Loading

HarvsG commented Jul 21, 2020 •

edited

Loading

silverwind commented Aug 1, 2020 •

edited

Loading

silverwind Oct 14, 2020 •

edited

Loading

silverwind commented Aug 1, 2020 •

edited

Loading

silverwind Apr 19, 2021 •

edited

Loading

silverwind left a comment •

edited

Loading

silverwind commented Apr 21, 2021 •

edited

Loading

silverwind commented Apr 21, 2021 •

edited

Loading

silverwind commented Apr 22, 2021 •

edited

Loading