Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 11 commits into from

Conversation

HarvsG
Copy link
Contributor

@HarvsG HarvsG commented Jul 16, 2020

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:

.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
.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 HarvsG marked this pull request as draft July 16, 2020 14:18
@HarvsG
Copy link
Contributor Author

HarvsG commented Jul 16, 2020

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:

<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:

func Type(filename string) string {

which uses the GetParserByFileName() function

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:

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

func RegisterParser(parser Parser) {

Which is called here:

// 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:

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

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

HarvsG commented Jul 16, 2020

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
    <div class="file-view {{if .IsMarkup}}{{.MarkupType}} markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}}">
    and
    <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
Copy link

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 HarvsG closed this Jul 18, 2020
@HarvsG HarvsG reopened this Jul 18, 2020
@HarvsG HarvsG marked this pull request as ready for review July 18, 2020 23:19
@lunny lunny added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI labels Jul 19, 2020
@lunny lunny added this to the 1.13.0 milestone Jul 19, 2020
@HarvsG
Copy link
Contributor Author

HarvsG commented Jul 20, 2020

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
Copy link
Member

lunny commented Jul 21, 2020

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
Copy link
Contributor Author

HarvsG commented Jul 21, 2020

Typical use with screenshots

Native appearance of .ipynb files in gitea:
20200721 before ext renderer

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:
image

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:

20200721 after install of nb convert

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
20200721 after css

Because the less is targetted at this div
image

image

@HarvsG
Copy link
Contributor Author

HarvsG commented Jul 21, 2020

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
Copy link
Member

lunny commented Jul 21, 2020

@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
Copy link
Member

lunny commented Jul 21, 2020

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

@HarvsG
Copy link
Contributor Author

HarvsG commented Jul 21, 2020

@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

@GiteaBot 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
Copy link
Member

silverwind commented Aug 1, 2020

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.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@silverwind silverwind Oct 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Member

silverwind commented Aug 1, 2020

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.

Copy link
Member

@silverwind silverwind left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@lunny
Copy link
Member

lunny commented Aug 2, 2020

@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.

@GiteaBot 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
@silverwind
Copy link
Member

Need to resolve #12261 (comment) before landing.

Copy link
Member

@6543 6543 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as per comment

@HarvsG
Copy link
Contributor Author

HarvsG commented Apr 17, 2021

Need to resolve #12261 (comment) before landing.

@6543 @silverwind Should now be fixed in 29a2f09

@HarvsG HarvsG requested review from 6543 and silverwind April 17, 2021 20:19
@6543 6543 dismissed lafriks’s stale review April 18, 2021 13:03

stale&resolved

@6543
Copy link
Member

6543 commented Apr 18, 2021

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

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

export default function initMarkdownAnchors() {
if (!document.querySelector('.markdown')) return;
if (!document.querySelector('.markup')) return;
Copy link
Member

@silverwind silverwind Apr 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@HarvsG HarvsG requested a review from silverwind April 20, 2021 13:31
Copy link
Member

@silverwind silverwind left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Member

6543 commented Apr 21, 2021

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
Copy link
Member

silverwind commented Apr 21, 2021

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
Copy link
Member

silverwind commented Apr 21, 2021

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
Copy link
Member

lunny commented Apr 22, 2021

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
Copy link
Member

silverwind commented Apr 22, 2021

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
Copy link
Member

6543 commented May 2, 2021

can you sorry again resolve conflicts :/

@silverwind
Copy link
Member

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
Copy link
Member

lunny commented May 5, 2021

Please resolve the conflicts.

@6543
Copy link
Member

6543 commented May 5, 2021

-> #15735

@6543 6543 closed this May 5, 2021
@6543 6543 removed this from the 1.15.0 milestone May 5, 2021
@6543
Copy link
Member

6543 commented May 7, 2021

@HarvsG merged as 6400668

@go-gitea go-gitea locked and limited conversation to collaborators Oct 19, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. topic/ui Change the appearance of the Gitea UI type/enhancement An improvement of existing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.