gitea/gitea-docs
1
0
Fork 0
mirror of https://gitea.com/gitea/docs.git synced 2026-07-22 02:37:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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 <11440490+HarvsG@users.noreply.github.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
6543
2021-05-07 10:43:41 +02:00
committed by GitHub
parent 1cb2926925
commit 234cd38364
1 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
doc/advanced/external-renderers.en-us.md
View File

@@ -98,3 +98,36 @@ 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, **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. there were significant problems with this method of configuration necessitating configuration through multiple sections.
## Customizing 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 CSS:
```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.css` and import it using a custom header file `custom/templates/custom/header.tmpl`:
```html
<link type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.css" />
```