diff --git a/docs/content/doc/advanced/external-renderers.en-us.md b/docs/content/doc/advanced/external-renderers.en-us.md index 11e7f73ae9b7f..3d87c75f929f3 100644 --- a/docs/content/doc/advanced/external-renderers.en-us.md +++ b/docs/content/doc/advanced/external-renderers.en-us.md @@ -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 `
` 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 + + +``` + +or if using pure CSS + +```html + +``` \ No newline at end of file diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl index 09eeb3f27fe88..7036d9c10a6cc 100644 --- a/templates/repo/settings/lfs_file.tmpl +++ b/templates/repo/settings/lfs_file.tmpl @@ -12,7 +12,7 @@
-
+
{{if .IsMarkup}} {{if .FileContent}}{{.FileContent | Safe}}{{end}} {{else if .IsRenderedHTML}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 889cb5a691d0d..d7fbdf2bb7275 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -64,7 +64,7 @@ {{end}}
-
+
{{if .IsMarkup}} {{if .FileContent}}{{.FileContent | Safe}}{{end}} {{else if .IsRenderedHTML}} diff --git a/web_src/js/markdown/anchors.js b/web_src/js/markdown/anchors.js index 62bf8c83c37d7..62561fe2504d8 100644 --- a/web_src/js/markdown/anchors.js +++ b/web_src/js/markdown/anchors.js @@ -16,7 +16,7 @@ function scrollToAnchor() { } export default function initMarkdownAnchors() { - if (!document.querySelector('.markdown')) return; + if (!document.querySelector('.markup')) return; for (const heading of document.querySelectorAll(headingSelector)) { const originalId = heading.id.replace(/^user-content-/, ''); diff --git a/web_src/js/markdown/mermaid.js b/web_src/js/markdown/mermaid.js index a518bc73451c7..d0aefd1aff978 100644 --- a/web_src/js/markdown/mermaid.js +++ b/web_src/js/markdown/mermaid.js @@ -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); } diff --git a/web_src/less/_markdown.less b/web_src/less/_markup.less similarity index 95% rename from web_src/less/_markdown.less rename to web_src/less/_markup.less index 09c94f0678af5..e5f3613957e9b 100644 --- a/web_src/less/_markdown.less +++ b/web_src/less/_markup.less @@ -1,4 +1,4 @@ -.markdown:not(code) { +.markup:not(code) { overflow: hidden; font-size: 16px; line-height: 1.6 !important; @@ -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 { @@ -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; @@ -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; diff --git a/web_src/less/index.less b/web_src/less/index.less index f1ac49a5136b9..8702c40fe6ee7 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -17,7 +17,7 @@ @import "_tribute"; @import "_font_i18n"; @import "_base"; -@import "_markdown"; +@import "_markup"; @import "_home"; @import "_install"; @import "_form";