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>
This commit is contained in:
parent
9b5185d3cc
commit
640066840e
30 changed files with 106 additions and 73 deletions
|
@ -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" />
|
||||||
|
```
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
</span>
|
</span>
|
||||||
{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}}
|
{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}}
|
||||||
</div>
|
</div>
|
||||||
{{if $.RenderedDescription}}<p class="render-content markdown">{{$.RenderedDescription|Str2html}}</p>{{end}}
|
{{if $.RenderedDescription}}<p class="render-content markup">{{$.RenderedDescription|Str2html}}</p>{{end}}
|
||||||
<div class="text grey meta">
|
<div class="text grey meta">
|
||||||
{{if .Org.Location}}<div class="item">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
|
{{if .Org.Location}}<div class="item">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
|
||||||
{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
|
{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
|
||||||
|
|
|
@ -164,7 +164,7 @@
|
||||||
<div class="ui bottom attached active write tab segment">
|
<div class="ui bottom attached active write tab segment">
|
||||||
<textarea class="review-textarea" tabindex="1" name="content"></textarea>
|
<textarea class="review-textarea" tabindex="1" name="content"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui bottom attached tab preview segment markdown">
|
<div class="ui bottom attached tab preview segment markup">
|
||||||
{{$.i18n.Tr "loading"}}
|
{{$.i18n.Tr "loading"}}
|
||||||
</div>
|
</div>
|
||||||
<div class="text right edit buttons">
|
<div class="text right edit buttons">
|
||||||
|
|
|
@ -22,12 +22,12 @@
|
||||||
<div class="ui active tab" data-tab="write">
|
<div class="ui active tab" data-tab="write">
|
||||||
<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
|
<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui tab markdown" data-tab="preview">
|
<div class="ui tab markup" data-tab="preview">
|
||||||
{{.i18n.Tr "loading"}}
|
{{.i18n.Tr "loading"}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="field footer">
|
<div class="field footer">
|
||||||
<span class="markdown-info">{{svg "octicon-markdown"}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span>
|
<span class="markup-info">{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}</span>
|
||||||
<div class="ui right">
|
<div class="ui right">
|
||||||
{{if $.reply}}
|
{{if $.reply}}
|
||||||
<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
|
<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui attached segment comment-body">
|
<div class="ui attached segment comment-body">
|
||||||
<div class="render-content markdown">
|
<div class="render-content markup">
|
||||||
{{if .RenderedContent}}
|
{{if .RenderedContent}}
|
||||||
{{.RenderedContent|Str2html}}
|
{{.RenderedContent|Str2html}}
|
||||||
{{else}}
|
{{else}}
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
{{.FileContent}}</textarea>
|
{{.FileContent}}</textarea>
|
||||||
<div class="editor-loading is-loading"></div>
|
<div class="editor-loading is-loading"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui bottom attached tab segment markdown" data-tab="preview">
|
<div class="ui bottom attached tab segment markup" data-tab="preview">
|
||||||
{{.i18n.Tr "loading"}}
|
{{.i18n.Tr "loading"}}
|
||||||
</div>
|
</div>
|
||||||
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
|
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
|
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3>
|
<h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3>
|
||||||
<div class="markdown">
|
<div class="markup">
|
||||||
<pre><code>touch README.md
|
<pre><code>touch README.md
|
||||||
git init
|
git init
|
||||||
{{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
|
{{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
|
||||||
|
@ -41,7 +41,7 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
|
||||||
|
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3>
|
<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3>
|
||||||
<div class="markdown">
|
<div class="markup">
|
||||||
<pre><code>git remote add origin <span class="clone-url">{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}</span>
|
<pre><code>git remote add origin <span class="clone-url">{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}</span>
|
||||||
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
|
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
|
{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui bottom tab markdown" data-tab="preview">
|
<div class="ui bottom tab markup" data-tab="preview">
|
||||||
{{.i18n.Tr "loading"}}
|
{{.i18n.Tr "loading"}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="ui three column stackable grid">
|
<div class="ui three column stackable grid">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<h1>{{.Milestone.Name}}</h1>
|
<h1>{{.Milestone.Name}}</h1>
|
||||||
<div class="markdown content">
|
<div class="markup content">
|
||||||
{{.Milestone.RenderedContent|Str2html}}
|
{{.Milestone.RenderedContent|Str2html}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -98,7 +98,7 @@
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{if .Content}}
|
{{if .Content}}
|
||||||
<div class="markdown content">
|
<div class="markup content">
|
||||||
{{.RenderedContent|Str2html}}
|
{{.RenderedContent|Str2html}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui attached segment comment-body">
|
<div class="ui attached segment comment-body">
|
||||||
<div class="render-content markdown">
|
<div class="render-content markup">
|
||||||
{{if .Issue.RenderedContent}}
|
{{if .Issue.RenderedContent}}
|
||||||
{{.Issue.RenderedContent|Str2html}}
|
{{.Issue.RenderedContent|Str2html}}
|
||||||
{{else}}
|
{{else}}
|
||||||
|
@ -191,7 +191,7 @@
|
||||||
<div class="ui bottom active tab write">
|
<div class="ui bottom active tab write">
|
||||||
<textarea tabindex="1" name="content"></textarea>
|
<textarea tabindex="1" name="content"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui bottom tab preview markdown">
|
<div class="ui bottom tab preview markup">
|
||||||
{{$.i18n.Tr "loading"}}
|
{{$.i18n.Tr "loading"}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -64,7 +64,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui attached segment comment-body">
|
<div class="ui attached segment comment-body">
|
||||||
<div class="render-content markdown">
|
<div class="render-content markup">
|
||||||
{{if .RenderedContent}}
|
{{if .RenderedContent}}
|
||||||
{{.RenderedContent|Str2html}}
|
{{.RenderedContent|Str2html}}
|
||||||
{{else}}
|
{{else}}
|
||||||
|
@ -442,7 +442,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui attached segment comment-body">
|
<div class="ui attached segment comment-body">
|
||||||
<div class="render-content markdown">
|
<div class="render-content markup">
|
||||||
{{if .RenderedContent}}
|
{{if .RenderedContent}}
|
||||||
{{.RenderedContent|Str2html}}
|
{{.RenderedContent|Str2html}}
|
||||||
{{else}}
|
{{else}}
|
||||||
|
@ -552,7 +552,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text comment-content">
|
<div class="text comment-content">
|
||||||
<div class="render-content markdown">
|
<div class="render-content markup">
|
||||||
{{if .RenderedContent}}
|
{{if .RenderedContent}}
|
||||||
{{.RenderedContent|Str2html}}
|
{{.RenderedContent|Str2html}}
|
||||||
{{else}}
|
{{else}}
|
||||||
|
@ -739,7 +739,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui attached segment">
|
<div class="ui attached segment">
|
||||||
<div class="render-content markdown">
|
<div class="render-content markup">
|
||||||
{{if .RenderedContent}}
|
{{if .RenderedContent}}
|
||||||
{{.RenderedContent|Str2html}}
|
{{.RenderedContent|Str2html}}
|
||||||
{{else}}
|
{{else}}
|
||||||
|
|
|
@ -136,7 +136,7 @@
|
||||||
| <span class="ahead"><a href="{{$.RepoLink}}/compare/{{.TagName | EscapePound}}...{{.Target}}">{{$.i18n.Tr "repo.release.ahead.commits" .NumCommitsBehind | Str2html}}</a> {{$.i18n.Tr "repo.release.ahead.target" .Target}}</span>
|
| <span class="ahead"><a href="{{$.RepoLink}}/compare/{{.TagName | EscapePound}}...{{.Target}}">{{$.i18n.Tr "repo.release.ahead.commits" .NumCommitsBehind | Str2html}}</a> {{$.i18n.Tr "repo.release.ahead.target" .Target}}</span>
|
||||||
{{end}}
|
{{end}}
|
||||||
</p>
|
</p>
|
||||||
<div class="markdown desc">
|
<div class="markup desc">
|
||||||
{{Str2html .Note}}
|
{{Str2html .Note}}
|
||||||
</div>
|
</div>
|
||||||
<div class="ui accordion download">
|
<div class="ui accordion download">
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
<div class="ui bottom active tab" data-tab="write">
|
<div class="ui bottom active tab" data-tab="write">
|
||||||
<textarea name="content">{{.content}}</textarea>
|
<textarea name="content">{{.content}}</textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui bottom tab markdown" data-tab="preview">
|
<div class="ui bottom tab markup" data-tab="preview">
|
||||||
{{$.i18n.Tr "loading"}}
|
{{$.i18n.Tr "loading"}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
</div>
|
</div>
|
||||||
</h4>
|
</h4>
|
||||||
<div class="ui attached table unstackable segment">
|
<div class="ui attached table unstackable segment">
|
||||||
<div class="file-view {{if .IsMarkup}}markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}}">
|
<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextFile}} code-view{{end}}">
|
||||||
{{if .IsMarkup}}
|
{{if .IsMarkup}}
|
||||||
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
|
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
|
||||||
{{else if .IsRenderedHTML}}
|
{{else if .IsRenderedHTML}}
|
||||||
|
|
|
@ -64,7 +64,7 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
</h4>
|
</h4>
|
||||||
<div class="ui attached table unstackable segment">
|
<div class="ui attached table unstackable segment">
|
||||||
<div class="file-view {{if .IsMarkup}}{{.MarkupType}} {{if ne "csv" .MarkupType}}markdown{{end}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextSource}}code-view{{end}}">
|
<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextSource}} code-view{{end}}">
|
||||||
{{if .IsMarkup}}
|
{{if .IsMarkup}}
|
||||||
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
|
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
|
||||||
{{else if .IsRenderedHTML}}
|
{{else if .IsRenderedHTML}}
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
<div class="ui {{if .sidebarPresent}}grid equal width{{end}}" style="margin-top: 1rem;">
|
<div class="ui {{if .sidebarPresent}}grid equal width{{end}}" style="margin-top: 1rem;">
|
||||||
<div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markdown">
|
<div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markup">
|
||||||
{{.content | Str2html}}
|
{{.content | Str2html}}
|
||||||
</div>
|
</div>
|
||||||
{{if .sidebarPresent}}
|
{{if .sidebarPresent}}
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
{{if $.RenderedDescription}}
|
{{if $.RenderedDescription}}
|
||||||
<li>
|
<li>
|
||||||
<div class="render-content markdown">{{$.RenderedDescription|Str2html}}</div>
|
<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
|
||||||
</li>
|
</li>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{range .OpenIDs}}
|
{{range .OpenIDs}}
|
||||||
|
|
|
@ -4,26 +4,26 @@ import Vue from 'vue';
|
||||||
import {htmlEscape} from 'escape-goat';
|
import {htmlEscape} from 'escape-goat';
|
||||||
import 'jquery.are-you-sure';
|
import 'jquery.are-you-sure';
|
||||||
|
|
||||||
import initMigration from './features/migration.js';
|
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
|
||||||
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 attachTribute from './features/tribute.js';
|
import attachTribute from './features/tribute.js';
|
||||||
import createColorPicker from './features/colorpicker.js';
|
import createColorPicker from './features/colorpicker.js';
|
||||||
import createDropzone from './features/dropzone.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 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 {initNotificationsTable, initNotificationCount} from './features/notification.js';
|
||||||
import {initStopwatch} from './features/stopwatch.js';
|
import {initStopwatch} from './features/stopwatch.js';
|
||||||
import {createCodeEditor, createMonaco} from './features/codeeditor.js';
|
import {renderMarkupContent} from './markup/content.js';
|
||||||
import {svg, svgs} from './svg.js';
|
|
||||||
import {stripTags, mqBinarySearch} from './utils.js';
|
import {stripTags, mqBinarySearch} from './utils.js';
|
||||||
|
import {svg, svgs} from './svg.js';
|
||||||
|
|
||||||
const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
|
const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
|
||||||
|
|
||||||
|
@ -51,7 +51,7 @@ function initCommentPreviewTab($form) {
|
||||||
}, (data) => {
|
}, (data) => {
|
||||||
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
||||||
$previewPanel.html(data);
|
$previewPanel.html(data);
|
||||||
renderMarkdownContent();
|
renderMarkupContent();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -81,7 +81,7 @@ function initEditPreviewTab($form) {
|
||||||
}, (data) => {
|
}, (data) => {
|
||||||
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
||||||
$previewPanel.html(data);
|
$previewPanel.html(data);
|
||||||
renderMarkdownContent();
|
renderMarkupContent();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -1107,7 +1107,7 @@ async function initRepository() {
|
||||||
dz.emit('submit');
|
dz.emit('submit');
|
||||||
dz.emit('reload');
|
dz.emit('reload');
|
||||||
}
|
}
|
||||||
renderMarkdownContent();
|
renderMarkupContent();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
@ -1473,8 +1473,8 @@ function initWikiForm() {
|
||||||
text: plainText,
|
text: plainText,
|
||||||
wiki: true
|
wiki: true
|
||||||
}, (data) => {
|
}, (data) => {
|
||||||
preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
|
preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
|
||||||
renderMarkdownContent();
|
renderMarkupContent();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1553,7 +1553,7 @@ function initWikiForm() {
|
||||||
const $form = $('.repository.wiki.new .ui.form');
|
const $form = $('.repository.wiki.new .ui.form');
|
||||||
const $root = $form.find('.field.content');
|
const $root = $form.find('.field.content');
|
||||||
const loading = $root.data('loading');
|
const loading = $root.data('loading');
|
||||||
$root.append(`<div class="ui bottom tab markdown" data-tab="preview">${loading}</div>`);
|
$root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
|
||||||
initCommentPreviewTab($form);
|
initCommentPreviewTab($form);
|
||||||
},
|
},
|
||||||
className: 'fa fa-file',
|
className: 'fa fa-file',
|
||||||
|
@ -2772,7 +2772,7 @@ $(document).ready(async () => {
|
||||||
searchTeams();
|
searchTeams();
|
||||||
searchRepositories();
|
searchRepositories();
|
||||||
|
|
||||||
initMarkdownAnchors();
|
initMarkupAnchors();
|
||||||
initCommentForm();
|
initCommentForm();
|
||||||
initInstall();
|
initInstall();
|
||||||
initArchiveLinks();
|
initArchiveLinks();
|
||||||
|
@ -2830,7 +2830,7 @@ $(document).ready(async () => {
|
||||||
initServiceWorker(),
|
initServiceWorker(),
|
||||||
initNotificationCount(),
|
initNotificationCount(),
|
||||||
initStopwatch(),
|
initStopwatch(),
|
||||||
renderMarkdownContent(),
|
renderMarkupContent(),
|
||||||
initGithook(),
|
initGithook(),
|
||||||
initImageDiff(),
|
initImageDiff(),
|
||||||
]);
|
]);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import {svg} from '../svg.js';
|
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() {
|
function scrollToAnchor() {
|
||||||
if (document.querySelector(':target')) return;
|
if (document.querySelector(':target')) return;
|
||||||
|
@ -15,8 +15,8 @@ function scrollToAnchor() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function initMarkdownAnchors() {
|
export function initMarkupAnchors() {
|
||||||
if (!document.querySelector('.markdown')) return;
|
if (!document.querySelector('.markup')) return;
|
||||||
|
|
||||||
for (const heading of document.querySelectorAll(headingSelector)) {
|
for (const heading of document.querySelectorAll(headingSelector)) {
|
||||||
const originalId = heading.id.replace(/^user-content-/, '');
|
const originalId = heading.id.replace(/^user-content-/, '');
|
|
@ -1,5 +1,5 @@
|
||||||
import {renderMermaid} from './mermaid.js';
|
import {renderMermaid} from './mermaid.js';
|
||||||
|
|
||||||
export default async function renderMarkdownContent() {
|
export async function renderMarkupContent() {
|
||||||
await renderMermaid(document.querySelectorAll('code.language-mermaid'));
|
await renderMermaid(document.querySelectorAll('code.language-mermaid'));
|
||||||
}
|
}
|
|
@ -3,7 +3,7 @@ const MAX_SOURCE_CHARACTERS = 5000;
|
||||||
function displayError(el, err) {
|
function displayError(el, err) {
|
||||||
el.closest('pre').classList.remove('is-loading');
|
el.closest('pre').classList.remove('is-loading');
|
||||||
const errorNode = document.createElement('div');
|
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);
|
errorNode.textContent = err.str || err.message || String(err);
|
||||||
el.closest('pre').before(errorNode);
|
el.closest('pre').before(errorNode);
|
||||||
}
|
}
|
|
@ -102,8 +102,8 @@
|
||||||
--color-active: #00000014;
|
--color-active: #00000014;
|
||||||
--color-menu: #ffffff;
|
--color-menu: #ffffff;
|
||||||
--color-card: #ffffff;
|
--color-card: #ffffff;
|
||||||
--color-markdown-table-row: #00000008;
|
--color-markup-table-row: #00000008;
|
||||||
--color-markdown-code-block: #00000010;
|
--color-markup-code-block: #00000010;
|
||||||
--color-button: #ffffff;
|
--color-button: #ffffff;
|
||||||
--color-code-bg: #ffffff;
|
--color-code-bg: #ffffff;
|
||||||
--color-shadow: #00000030;
|
--color-shadow: #00000030;
|
||||||
|
|
|
@ -580,7 +580,7 @@
|
||||||
border-right-color: var(--color-box-body);
|
border-right-color: var(--color-box-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown {
|
.markup {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1020,7 +1020,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown {
|
.markup {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1040,7 +1040,7 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab.markdown {
|
.tab.markup {
|
||||||
min-height: 5rem;
|
min-height: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1244,7 +1244,7 @@
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown {
|
.markup {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1996,7 +1996,7 @@
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .markdown {
|
> .markup {
|
||||||
padding: 15px 30px;
|
padding: 15px 30px;
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
@ -2991,7 +2991,7 @@ td.blob-excerpt {
|
||||||
.webhook-info {
|
.webhook-info {
|
||||||
padding: 7px 12px;
|
padding: 7px 12px;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
background-color: var(--color-markdown-code-block);
|
background-color: var(--color-markup-code-block);
|
||||||
border: 1px solid var(--color-secondary);
|
border: 1px solid var(--color-secondary);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|
|
@ -81,7 +81,7 @@
|
||||||
.ui.active.tab {
|
.ui.active.tab {
|
||||||
padding: .5em;
|
padding: .5em;
|
||||||
|
|
||||||
&.markdown {
|
&.markup {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
min-height: 168px;
|
min-height: 168px;
|
||||||
}
|
}
|
||||||
|
@ -95,7 +95,7 @@
|
||||||
border-top: 1px solid var(--color-secondary);
|
border-top: 1px solid var(--color-secondary);
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
|
|
||||||
.markdown-info {
|
.markup-info {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown pre.is-loading,
|
.markup pre.is-loading,
|
||||||
.editor-loading.is-loading {
|
.editor-loading.is-loading {
|
||||||
height: 12rem;
|
height: 12rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,8 @@
|
||||||
@import "./features/imagediff.less";
|
@import "./features/imagediff.less";
|
||||||
@import "./features/codeeditor.less";
|
@import "./features/codeeditor.less";
|
||||||
@import "./features/projects.less";
|
@import "./features/projects.less";
|
||||||
@import "./markdown/mermaid.less";
|
@import "./markup/content.less";
|
||||||
|
@import "./markup/mermaid.less";
|
||||||
|
|
||||||
@import "./chroma/base.less";
|
@import "./chroma/base.less";
|
||||||
@import "./chroma/light.less";
|
@import "./chroma/light.less";
|
||||||
|
@ -18,7 +19,6 @@
|
||||||
@import "_tribute";
|
@import "_tribute";
|
||||||
@import "_font_i18n";
|
@import "_font_i18n";
|
||||||
@import "_base";
|
@import "_base";
|
||||||
@import "_markdown";
|
|
||||||
@import "_home";
|
@import "_home";
|
||||||
@import "_install";
|
@import "_install";
|
||||||
@import "_form";
|
@import "_form";
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
.markdown:not(code) {
|
.markup {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.5 !important;
|
line-height: 1.5 !important;
|
||||||
|
@ -290,7 +290,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
table tr:nth-child(2n) {
|
table tr:nth-child(2n) {
|
||||||
background-color: var(--color-markdown-table-row);
|
background-color: var(--color-markup-table-row);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@ -404,7 +404,7 @@
|
||||||
padding: .2em .4em;
|
padding: .2em .4em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
background-color: var(--color-markdown-code-block);
|
background-color: var(--color-markup-code-block);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -437,7 +437,7 @@
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
background-color: var(--color-markdown-code-block);
|
background-color: var(--color-markup-code-block);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -477,7 +477,7 @@
|
||||||
line-height: 10px;
|
line-height: 10px;
|
||||||
color: var(--color-text-light);
|
color: var(--color-text-light);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
background-color: var(--color-markdown-code-block);
|
background-color: var(--color-markup-code-block);
|
||||||
border: 1px solid var(--color-secondary);
|
border: 1px solid var(--color-secondary);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: inset 0 -1px 0 var(--color-secondary);
|
box-shadow: inset 0 -1px 0 var(--color-secondary);
|
||||||
|
@ -523,7 +523,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-block-error {
|
.markup-block-error {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
border-bottom-left-radius: 0 !important;
|
border-bottom-left-radius: 0 !important;
|
||||||
border-bottom-right-radius: 0 !important;
|
border-bottom-right-radius: 0 !important;
|
||||||
|
@ -534,7 +534,7 @@
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-block-error + pre {
|
.markup-block-error + pre {
|
||||||
border-top: none !important;
|
border-top: none !important;
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
border-top-left-radius: 0 !important;
|
border-top-left-radius: 0 !important;
|
|
@ -97,8 +97,8 @@
|
||||||
--color-active: #ffffff16;
|
--color-active: #ffffff16;
|
||||||
--color-menu: #2e323e;
|
--color-menu: #2e323e;
|
||||||
--color-card: #2e323e;
|
--color-card: #2e323e;
|
||||||
--color-markdown-table-row: #ffffff06;
|
--color-markup-table-row: #ffffff06;
|
||||||
--color-markdown-code-block: #2a2e3a;
|
--color-markup-code-block: #2a2e3a;
|
||||||
--color-button: #353846;
|
--color-button: #353846;
|
||||||
--color-code-bg: #2a2e3a;
|
--color-code-bg: #2a2e3a;
|
||||||
--color-shadow: #00000060;
|
--color-shadow: #00000060;
|
||||||
|
@ -301,7 +301,7 @@ a.ui.basic.green.label:hover {
|
||||||
& + .editor-preview-side {
|
& + .editor-preview-side {
|
||||||
background: #353945;
|
background: #353945;
|
||||||
|
|
||||||
.markdown:not(code).ui.segment {
|
.markup.ui.segment {
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -754,7 +754,7 @@ img[src$="/img/matrix.svg"] {
|
||||||
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
|
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-block-error {
|
.markup-block-error {
|
||||||
border: 1px solid rgba(121, 71, 66, .5) !important;
|
border: 1px solid rgba(121, 71, 66, .5) !important;
|
||||||
border-bottom: none !important;
|
border-bottom: none !important;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue