From 234cd383647ee078125bd6813d92ad64a6b8bcf4 Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Fri, 7 May 2021 10:43:41 +0200 Subject: [PATCH] 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 Co-authored-by: silverwind --- doc/advanced/external-renderers.en-us.md | 33 ++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/doc/advanced/external-renderers.en-us.md b/doc/advanced/external-renderers.en-us.md index 6b283ca2..71fabc52 100644 --- a/doc/advanced/external-renderers.en-us.md +++ b/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 `
` 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 + +```