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 `
` 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 + +``` diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl index 9b77ae6b3f..5e0a53aa56 100644 --- a/templates/org/home.tmpl +++ b/templates/org/home.tmpl @@ -11,7 +11,7 @@ {{if .IsOrganizationOwner}}{{svg "octicon-gear" 16 "mb-3"}}{{end}}
- {{if $.RenderedDescription}}

{{$.RenderedDescription|Str2html}}

{{end}} + {{if $.RenderedDescription}}

{{$.RenderedDescription|Str2html}}

{{end}}
{{if .Org.Location}}
{{svg "octicon-location"}} {{.Org.Location}}
{{end}} {{if .Org.Website}}
{{svg "octicon-link"}} {{.Org.Website}}
{{end}} diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 9a2f7bdd7f..582b66d5db 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -164,7 +164,7 @@
-
+
{{$.i18n.Tr "loading"}}
diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl index c82d32c214..628cd52dc2 100644 --- a/templates/repo/diff/comment_form.tmpl +++ b/templates/repo/diff/comment_form.tmpl @@ -22,12 +22,12 @@
-
+
{{.i18n.Tr "loading"}}
- {{svg "octicon-markdown"}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}} + {{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}
{{if $.reply}} diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl index b566ffce9a..6e39fbe854 100644 --- a/templates/repo/diff/comments.tmpl +++ b/templates/repo/diff/comments.tmpl @@ -51,7 +51,7 @@
-
+
{{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 3efde70f50..b7e1589aa1 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -44,7 +44,7 @@ {{.FileContent}}
-
+
{{.i18n.Tr "loading"}}
diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl index 7dae7c0121..21c6005456 100644 --- a/templates/repo/empty.tmpl +++ b/templates/repo/empty.tmpl @@ -27,7 +27,7 @@

{{.i18n.Tr "repo.create_new_repo_command"}}

-
+ 
touch README.md
 git init
 {{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
@@ -41,7 +41,7 @@ git push -u origin {{.Repository.DefaultBranch}}

{{.i18n.Tr "repo.push_exist_repo"}}

-
+ 
git remote add origin {{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}
 git push -u origin {{.Repository.DefaultBranch}}
diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl index ab874bdd13..77e82930dc 100644 --- a/templates/repo/issue/comment_tab.tmpl +++ b/templates/repo/issue/comment_tab.tmpl @@ -8,7 +8,7 @@ {{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
-
+
{{.i18n.Tr "loading"}}
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl index 8c2f36f04b..897d297d37 100644 --- a/templates/repo/issue/milestone_issues.tmpl +++ b/templates/repo/issue/milestone_issues.tmpl @@ -5,7 +5,7 @@

{{.Milestone.Name}}

-
+
{{.Milestone.RenderedContent|Str2html}}
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl index c7d3522abc..448d758e3e 100644 --- a/templates/repo/issue/milestones.tmpl +++ b/templates/repo/issue/milestones.tmpl @@ -98,7 +98,7 @@
{{end}} {{if .Content}} -
+
{{.RenderedContent|Str2html}}
{{end}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index 0482604b70..e353d71ee9 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -57,7 +57,7 @@
-
+
{{if .Issue.RenderedContent}} {{.Issue.RenderedContent|Str2html}} {{else}} @@ -191,7 +191,7 @@
-
+
{{$.i18n.Tr "loading"}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 81f0d0434a..4863f7f2f1 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -64,7 +64,7 @@
-
+
{{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} @@ -442,7 +442,7 @@
-
+
{{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} @@ -552,7 +552,7 @@
-
+
{{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} @@ -739,7 +739,7 @@
-
+
{{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl index 63f9e26cf1..d98e441644 100644 --- a/templates/repo/release/list.tmpl +++ b/templates/repo/release/list.tmpl @@ -136,7 +136,7 @@ | {{$.i18n.Tr "repo.release.ahead.commits" .NumCommitsBehind | Str2html}} {{$.i18n.Tr "repo.release.ahead.target" .Target}} {{end}}

-
+
{{Str2html .Note}}
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl index 8489d89597..c4b36597c6 100644 --- a/templates/repo/release/new.tmpl +++ b/templates/repo/release/new.tmpl @@ -53,7 +53,7 @@
-
+
{{$.i18n.Tr "loading"}}
diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl index 09eeb3f27f..478c034e11 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 d9c1e93eaf..5798ec875c 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/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl index 0bc5858863..fbb97db4ad 100644 --- a/templates/repo/wiki/view.tmpl +++ b/templates/repo/wiki/view.tmpl @@ -61,7 +61,7 @@
{{end}}
-
+
{{.content | Str2html}}
{{if .sidebarPresent}} diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl index 18f3c9f6dd..29da933493 100644 --- a/templates/user/profile.tmpl +++ b/templates/user/profile.tmpl @@ -36,7 +36,7 @@ {{end}} {{if $.RenderedDescription}}
  • -
    {{$.RenderedDescription|Str2html}}
    +
    {{$.RenderedDescription|Str2html}}
    • {{end}} {{range .OpenIDs}} diff --git a/web_src/js/index.js b/web_src/js/index.js index 2fce21b8d3..53843a6d22 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -4,26 +4,26 @@ import Vue from 'vue'; import {htmlEscape} from 'escape-goat'; import 'jquery.are-you-sure'; -import initMigration from './features/migration.js'; -import initContextPopups from './features/contextpopup.js'; -import initGitGraph from './features/gitgraph.js'; -import initClipboard from './features/clipboard.js'; -import initHeatmap from './features/heatmap.js'; -import initProject from './features/projects.js'; -import initServiceWorker from './features/serviceworker.js'; -import initMarkdownAnchors from './markdown/anchors.js'; -import renderMarkdownContent from './markdown/content.js'; +import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; import attachTribute from './features/tribute.js'; import createColorPicker from './features/colorpicker.js'; import createDropzone from './features/dropzone.js'; -import initTableSort from './features/tablesort.js'; +import initClipboard from './features/clipboard.js'; +import initContextPopups from './features/contextpopup.js'; +import initGitGraph from './features/gitgraph.js'; +import initHeatmap from './features/heatmap.js'; import initImageDiff from './features/imagediff.js'; -import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; +import initMigration from './features/migration.js'; +import initProject from './features/projects.js'; +import initServiceWorker from './features/serviceworker.js'; +import initTableSort from './features/tablesort.js'; +import {createCodeEditor, createMonaco} from './features/codeeditor.js'; +import {initMarkupAnchors} from './markup/anchors.js'; import {initNotificationsTable, initNotificationCount} from './features/notification.js'; import {initStopwatch} from './features/stopwatch.js'; -import {createCodeEditor, createMonaco} from './features/codeeditor.js'; -import {svg, svgs} from './svg.js'; +import {renderMarkupContent} from './markup/content.js'; import {stripTags, mqBinarySearch} from './utils.js'; +import {svg, svgs} from './svg.js'; const {AppSubUrl, StaticUrlPrefix, csrf} = window.config; @@ -51,7 +51,7 @@ function initCommentPreviewTab($form) { }, (data) => { const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`); $previewPanel.html(data); - renderMarkdownContent(); + renderMarkupContent(); }); }); @@ -81,7 +81,7 @@ function initEditPreviewTab($form) { }, (data) => { const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`); $previewPanel.html(data); - renderMarkdownContent(); + renderMarkupContent(); }); }); } @@ -1107,7 +1107,7 @@ async function initRepository() { dz.emit('submit'); dz.emit('reload'); } - renderMarkdownContent(); + renderMarkupContent(); }); }); } else { @@ -1473,8 +1473,8 @@ function initWikiForm() { text: plainText, wiki: true }, (data) => { - preview.innerHTML = `
    ${data}
    `; - renderMarkdownContent(); + preview.innerHTML = `
    ${data}
    `; + renderMarkupContent(); }); }; @@ -1553,7 +1553,7 @@ function initWikiForm() { const $form = $('.repository.wiki.new .ui.form'); const $root = $form.find('.field.content'); const loading = $root.data('loading'); - $root.append(`
    ${loading}
    `); + $root.append(`
    ${loading}
    `); initCommentPreviewTab($form); }, className: 'fa fa-file', @@ -2772,7 +2772,7 @@ $(document).ready(async () => { searchTeams(); searchRepositories(); - initMarkdownAnchors(); + initMarkupAnchors(); initCommentForm(); initInstall(); initArchiveLinks(); @@ -2830,7 +2830,7 @@ $(document).ready(async () => { initServiceWorker(), initNotificationCount(), initStopwatch(), - renderMarkdownContent(), + renderMarkupContent(), initGithook(), initImageDiff(), ]); diff --git a/web_src/js/markdown/anchors.js b/web_src/js/markup/anchors.js similarity index 82% rename from web_src/js/markdown/anchors.js rename to web_src/js/markup/anchors.js index 62bf8c83c3..cc2ed5db78 100644 --- a/web_src/js/markdown/anchors.js +++ b/web_src/js/markup/anchors.js @@ -1,6 +1,6 @@ import {svg} from '../svg.js'; -const headingSelector = '.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6'; +const headingSelector = '.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6'; function scrollToAnchor() { if (document.querySelector(':target')) return; @@ -15,8 +15,8 @@ function scrollToAnchor() { } } -export default function initMarkdownAnchors() { - if (!document.querySelector('.markdown')) return; +export function initMarkupAnchors() { + 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/content.js b/web_src/js/markup/content.js similarity index 68% rename from web_src/js/markdown/content.js rename to web_src/js/markup/content.js index 918cd6fe81..f06c9908f2 100644 --- a/web_src/js/markdown/content.js +++ b/web_src/js/markup/content.js @@ -1,5 +1,5 @@ import {renderMermaid} from './mermaid.js'; -export default async function renderMarkdownContent() { +export async function renderMarkupContent() { await renderMermaid(document.querySelectorAll('code.language-mermaid')); } diff --git a/web_src/js/markdown/mermaid.js b/web_src/js/markup/mermaid.js similarity index 94% rename from web_src/js/markdown/mermaid.js rename to web_src/js/markup/mermaid.js index a518bc7345..d0aefd1aff 100644 --- a/web_src/js/markdown/mermaid.js +++ b/web_src/js/markup/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/_base.less b/web_src/less/_base.less index 7e563d2f23..d85f13cb33 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -102,8 +102,8 @@ --color-active: #00000014; --color-menu: #ffffff; --color-card: #ffffff; - --color-markdown-table-row: #00000008; - --color-markdown-code-block: #00000010; + --color-markup-table-row: #00000008; + --color-markup-code-block: #00000010; --color-button: #ffffff; --color-code-bg: #ffffff; --color-shadow: #00000030; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 5ff51b1d6d..549bd4d7e5 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -580,7 +580,7 @@ border-right-color: var(--color-box-body); } - .markdown { + .markup { font-size: 14px; } } @@ -1020,7 +1020,7 @@ } } - .markdown { + .markup { font-size: 14px; } @@ -1040,7 +1040,7 @@ overflow: hidden; } - .tab.markdown { + .tab.markup { min-height: 5rem; } } @@ -1244,7 +1244,7 @@ margin-bottom: 1.5rem; } - .markdown { + .markup { font-size: 14px; } } @@ -1996,7 +1996,7 @@ margin-top: -5px; } - > .markdown { + > .markup { padding: 15px 30px; h1, @@ -2991,7 +2991,7 @@ td.blob-excerpt { .webhook-info { padding: 7px 12px; margin: 10px 0; - background-color: var(--color-markdown-code-block); + background-color: var(--color-markup-code-block); border: 1px solid var(--color-secondary); border-radius: 3px; font-size: 13px; diff --git a/web_src/less/_review.less b/web_src/less/_review.less index f6f5df20a2..2b8700a745 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -81,7 +81,7 @@ .ui.active.tab { padding: .5em; - &.markdown { + &.markup { padding: 1em; min-height: 168px; } @@ -95,7 +95,7 @@ border-top: 1px solid var(--color-secondary); padding: 10px 0; - .markdown-info { + .markup-info { display: inline-block; margin: 5px 0; font-size: 12px; diff --git a/web_src/less/features/animations.less b/web_src/less/features/animations.less index 0b50440bf3..f3491155cd 100644 --- a/web_src/less/features/animations.less +++ b/web_src/less/features/animations.less @@ -28,7 +28,7 @@ border-radius: 100%; } -.markdown pre.is-loading, +.markup pre.is-loading, .editor-loading.is-loading { height: 12rem; } diff --git a/web_src/less/index.less b/web_src/less/index.less index c125ccac31..f52953f2a4 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -9,7 +9,8 @@ @import "./features/imagediff.less"; @import "./features/codeeditor.less"; @import "./features/projects.less"; -@import "./markdown/mermaid.less"; +@import "./markup/content.less"; +@import "./markup/mermaid.less"; @import "./chroma/base.less"; @import "./chroma/light.less"; @@ -18,7 +19,6 @@ @import "_tribute"; @import "_font_i18n"; @import "_base"; -@import "_markdown"; @import "_home"; @import "_install"; @import "_form"; diff --git a/web_src/less/_markdown.less b/web_src/less/markup/content.less similarity index 96% rename from web_src/less/_markdown.less rename to web_src/less/markup/content.less index 66276894c0..df87c21d8c 100644 --- a/web_src/less/_markdown.less +++ b/web_src/less/markup/content.less @@ -1,4 +1,4 @@ -.markdown:not(code) { +.markup { overflow: hidden; font-size: 16px; line-height: 1.5 !important; @@ -290,7 +290,7 @@ } table tr:nth-child(2n) { - background-color: var(--color-markdown-table-row); + background-color: var(--color-markup-table-row); } img { @@ -404,7 +404,7 @@ padding: .2em .4em; margin: 0; font-size: 85%; - background-color: var(--color-markdown-code-block); + background-color: var(--color-markup-code-block); border-radius: 4px; } @@ -437,7 +437,7 @@ padding: 16px; font-size: 85%; line-height: 1.45; - background-color: var(--color-markdown-code-block); + background-color: var(--color-markup-code-block); border-radius: 4px; } @@ -477,7 +477,7 @@ line-height: 10px; color: var(--color-text-light); vertical-align: middle; - background-color: var(--color-markdown-code-block); + background-color: var(--color-markup-code-block); border: 1px solid var(--color-secondary); border-radius: 3px; box-shadow: inset 0 -1px 0 var(--color-secondary); @@ -523,7 +523,7 @@ } } -.markdown-block-error { +.markup-block-error { margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; @@ -534,7 +534,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/markdown/mermaid.less b/web_src/less/markup/mermaid.less similarity index 100% rename from web_src/less/markdown/mermaid.less rename to web_src/less/markup/mermaid.less diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 346a6e85ea..9e39c4bec4 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -97,8 +97,8 @@ --color-active: #ffffff16; --color-menu: #2e323e; --color-card: #2e323e; - --color-markdown-table-row: #ffffff06; - --color-markdown-code-block: #2a2e3a; + --color-markup-table-row: #ffffff06; + --color-markup-code-block: #2a2e3a; --color-button: #353846; --color-code-bg: #2a2e3a; --color-shadow: #00000060; @@ -301,7 +301,7 @@ a.ui.basic.green.label:hover { & + .editor-preview-side { background: #353945; - .markdown:not(code).ui.segment { + .markup.ui.segment { border-width: 0; } } @@ -754,7 +754,7 @@ img[src$="/img/matrix.svg"] { border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da; } -.markdown-block-error { +.markup-block-error { border: 1px solid rgba(121, 71, 66, .5) !important; border-bottom: none !important; }