Skip to content

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

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.

Sign up for GitHub

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

Closed
wants to merge 11 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4919bf6
creates and implements generic markup less class
HarvsG Jul 18, 2020
b5d5537
How to give custom CSS to externally rendered html
HarvsG Jul 18, 2020
273f6b0
Clarifies sources of CSS styling of markup
HarvsG Jul 18, 2020
5794c70
further clarification of sources of markup styling
HarvsG Jul 18, 2020
67b494d
rename _markdown to _markup
HarvsG Nov 19, 2020
e6f256c
remove defunct import
HarvsG Nov 19, 2020
82936c5
fix orphaned reference
HarvsG Apr 17, 2021
66d6337
remove comments
HarvsG Apr 17, 2021
29a2f09
fix header navigation
HarvsG Apr 17, 2021
dabed52
Merge branch 'master' into markup
6543 Apr 18, 2021
2bef1fe
Merge branch 'master' into markup
techknowlogick Apr 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions docs/content/doc/advanced/external-renderers.en-us.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,3 +98,71 @@ Once your configuration changes have been made, restart Gitea to have changes ta

**Note**: Prior to Gitea 1.12 there was a single `markup.sanitiser` section with keys that were redefined for multiple rules, however,
there were significant problems with this method of configuration necessitating configuration through multiple sections.

## Customising CSS
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.

And so you could write some Less:
```less
.markup.XXXXX {

html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

body {
color: #444;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 12px;
line-height: 1.7;
padding: 1em;
margin: auto;
max-width: 42em;
background: #fefefe;
}

p {
color: orangered;
}
}
```
which is equivalent to:
```css
.markup.XXXXX html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

.markup.XXXXX body {
color: #444;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 12px;
line-height: 1.7;
padding: 1em;
margin: auto;
max-width: 42em;
background: #fefefe;
}

.markup.XXXXX p {
color: orangered;
}
```
Add your stylesheet to your custom directory e.g `custom/public/css/my-style-XXXXX.less` or `custom/public/css/my-style-XXXXX.css`

Then to import it, add it to the custom header or footer. `custom/templates/custom/header.tmpl`
```html
<link rel="stylesheet/less" type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.less" />
<script src="//cdn.jsdelivr.net/npm/less" ></script>
```

or if using pure CSS

```html
<link rel="stylesheet/less" type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.css" />
```
2 changes: 1 addition & 1 deletion templates/repo/settings/lfs_file.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</div>
</h4>
<div class="ui attached table unstackable segment">
<div class="file-view {{if .IsMarkup}}markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}}">
<div class="file-view {{if .IsMarkup}}markup {{.MarkupType}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}}">
{{if .IsMarkup}}
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
{{else if .IsRenderedHTML}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/view_file.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
{{end}}
</h4>
<div class="ui attached table unstackable segment">
<div class="file-view {{if .IsMarkup}}{{.MarkupType}} {{if ne "csv" .MarkupType}}markdown{{end}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextSource}}code-view{{end}}">
<div class="file-view {{if .IsMarkup}}markup {{.MarkupType}} {{if ne "csv" .MarkupType}}{{end}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextSource}}code-view{{end}}">
{{if .IsMarkup}}
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
{{else if .IsRenderedHTML}}
Expand Down
2 changes: 1 addition & 1 deletion web_src/js/markdown/mermaid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const MAX_SOURCE_CHARACTERS = 5000;
function displayError(el, err) {
el.closest('pre').classList.remove('is-loading');
const errorNode = document.createElement('div');
errorNode.setAttribute('class', 'ui message error markdown-block-error mono');
errorNode.setAttribute('class', 'ui message error markup-block-error mono');
errorNode.textContent = err.str || err.message || String(err);
el.closest('pre').before(errorNode);
}
Expand Down
31 changes: 28 additions & 3 deletions web_src/less/_markdown.less → web_src/less/_markup.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.markdown:not(code) {
.markup:not(code) {
Copy link
Member

@silverwind silverwind Aug 1, 2020

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

@zeripath zeripath Oct 10, 2020

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 •
edited
Loading

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.

overflow: hidden;
font-size: 16px;
line-height: 1.6 !important;
Expand Down Expand Up @@ -473,6 +473,31 @@
box-shadow: inset 0 -1px 0 var(--color-secondary);
}

.csv-data td,
.csv-data th {
padding: 5px;
overflow: hidden;
font-size: 12px;
line-height: 1;
text-align: left;
white-space: nowrap;
}

.csv-data .blob-num {
padding: 10px 8px 9px;
text-align: right;
border: 0;
}

.csv-data tr {
border-top: 0;
}

.csv-data th {
font-weight: 600;
border-top: 0;
}

.ui.list .list,
ol.ui.list ol,
ul.ui.list ul {
Expand Down Expand Up @@ -513,7 +538,7 @@
}
}

.markdown-block-error {
.markup-block-error {
margin-bottom: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
Expand All @@ -524,7 +549,7 @@
text-align: left !important;
}

.markdown-block-error + pre {
.markup-block-error + pre {
border-top: none !important;
margin-top: 0 !important;
border-top-left-radius: 0 !important;
Expand Down
2 changes: 1 addition & 1 deletion web_src/less/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
@import "_tribute";
@import "_font_i18n";
@import "_base";
@import "_markdown";
@import "_markup";
@import "_home";
@import "_install";
@import "_form";
Expand Down