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 <11440490+HarvsG@users.noreply.github.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>

1 files changed, 33 insertions, 0 deletions

diff --git a/docs/content/doc/advanced/external-renderers.en-us.md b/docs/content/doc/advanced/external-renderers.en-us.md
index 6b283ca2e1..71fabc529d 100644
--- a/docs/content/doc/advanced/external-renderers.en-us.md
+++ b/docs/content/doc/advanced/external-renderers.en-us.md
@@ -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,
 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" />
+```