Skip to content

Commit 6400668

Browse files
6543HarvsGtechknowlogicksilverwind
authored
Use a generic markup class to display externally rendered files and diffs (#15735)
* creates and implements generic markup less class * How to give custom CSS to externally rendered html * Clarifies sources of CSS styling of markup * further clarification of sources of markup styling * rename _markdown to _markup * remove defunct import * fix orphaned reference * Update docs/content/doc/advanced/external-renderers.en-us.md * more renames markdown -> markup * do not suggest less customization * add back tokens * fix class whitespace, remove useless if-clause * remove unused csv-data rules * use named exports and rename functions * sort imports Co-authored-by: HarvsG <[email protected]> Co-authored-by: techknowlogick <[email protected]> Co-authored-by: silverwind <[email protected]>
1 parent 9b5185d commit 6400668

30 files changed

+104
-71
lines changed

‎docs/content/doc/advanced/external-renderers.en-us.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,36 @@ Once your configuration changes have been made, restart Gitea to have changes ta
9898

9999
**Note**: Prior to Gitea 1.12 there was a single `markup.sanitiser` section with keys that were redefined for multiple rules, however,
100100
there were significant problems with this method of configuration necessitating configuration through multiple sections.
101+
102+
## Customizing CSS
103+
The external renderer is specified in the .ini in the format `[markup.XXXXX]` and the HTML supplied by your external renderer will be wrapped in a `<div>` with classes `markup` and `XXXXX`. The `markup` class provides out of the box styling (as does `markdown` if `XXXXX` is `markdown`). Otherwise you can use these classes to specifically target the contents of your rendered HTML.
104+
105+
And so you could write some CSS:
106+
```css
107+
.markup.XXXXX html {
108+
font-size: 100%;
109+
overflow-y: scroll;
110+
-webkit-text-size-adjust: 100%;
111+
-ms-text-size-adjust: 100%;
112+
}
113+
114+
.markup.XXXXX body {
115+
color: #444;
116+
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
117+
font-size: 12px;
118+
line-height: 1.7;
119+
padding: 1em;
120+
margin: auto;
121+
max-width: 42em;
122+
background: #fefefe;
123+
}
124+
125+
.markup.XXXXX p {
126+
color: orangered;
127+
}
128+
```
129+
130+
Add your stylesheet to your custom directory e.g `custom/public/css/my-style-XXXXX.css` and import it using a custom header file `custom/templates/custom/header.tmpl`:
131+
```html
132+
<link type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.css" />
133+
```

‎templates/org/home.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</span>
1212
{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}}
1313
</div>
14-
{{if $.RenderedDescription}}<p class="render-content markdown">{{$.RenderedDescription|Str2html}}</p>{{end}}
14+
{{if $.RenderedDescription}}<p class="render-content markup">{{$.RenderedDescription|Str2html}}</p>{{end}}
1515
<div class="text grey meta">
1616
{{if .Org.Location}}<div class="item">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
1717
{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}

‎templates/repo/diff/box.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164
<div class="ui bottom attached active write tab segment">
165165
<textarea class="review-textarea" tabindex="1" name="content"></textarea>
166166
</div>
167-
<div class="ui bottom attached tab preview segment markdown">
167+
<div class="ui bottom attached tab preview segment markup">
168168
{{$.i18n.Tr "loading"}}
169169
</div>
170170
<div class="text right edit buttons">

‎templates/repo/diff/comment_form.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222
<div class="ui active tab" data-tab="write">
2323
<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
2424
</div>
25-
<div class="ui tab markdown" data-tab="preview">
25+
<div class="ui tab markup" data-tab="preview">
2626
{{.i18n.Tr "loading"}}
2727
</div>
2828
</div>
2929
<div class="field footer">
30-
<span class="markdown-info">{{svg "octicon-markdown"}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span>
30+
<span class="markup-info">{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}</span>
3131
<div class="ui right">
3232
{{if $.reply}}
3333
<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>

‎templates/repo/diff/comments.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</div>
5252
</div>
5353
<div class="ui attached segment comment-body">
54-
<div class="render-content markdown">
54+
<div class="render-content markup">
5555
{{if .RenderedContent}}
5656
{{.RenderedContent|Str2html}}
5757
{{else}}

‎templates/repo/editor/edit.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
{{.FileContent}}</textarea>
4545
<div class="editor-loading is-loading"></div>
4646
</div>
47-
<div class="ui bottom attached tab segment markdown" data-tab="preview">
47+
<div class="ui bottom attached tab segment markup" data-tab="preview">
4848
{{.i18n.Tr "loading"}}
4949
</div>
5050
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">

‎templates/repo/empty.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
<div class="item">
2929
<h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3>
30-
<div class="markdown">
30+
<div class="markup">
3131
<pre><code>touch README.md
3232
git init
3333
{{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
@@ -41,7 +41,7 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
4141

4242
<div class="item">
4343
<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3>
44-
<div class="markdown">
44+
<div class="markup">
4545
<pre><code>git remote add origin <span class="clone-url">{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}</span>
4646
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
4747
</div>

‎templates/repo/issue/comment_tab.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
99
</textarea>
1010
</div>
11-
<div class="ui bottom tab markdown" data-tab="preview">
11+
<div class="ui bottom tab markup" data-tab="preview">
1212
{{.i18n.Tr "loading"}}
1313
</div>
1414
</div>

‎templates/repo/issue/milestone_issues.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="ui three column stackable grid">
66
<div class="column">
77
<h1>{{.Milestone.Name}}</h1>
8-
<div class="markdown content">
8+
<div class="markup content">
99
{{.Milestone.RenderedContent|Str2html}}
1010
</div>
1111
</div>

‎templates/repo/issue/milestones.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
</div>
9999
{{end}}
100100
{{if .Content}}
101-
<div class="markdown content">
101+
<div class="markup content">
102102
{{.RenderedContent|Str2html}}
103103
</div>
104104
{{end}}

0 commit comments

Comments
 (0)