enhance(markup): align markdown rendering details with GitHub (#39955)

Fixes markdown rendering details where Gitea deviated from GitHub
unintentionally, and adds a `/devtest/markdown` page to review markdown
rendering.

- Paragraphs get the intended 1.5 line height
- Blockquotes, alerts and definition lists no longer inherit browser
default margins
- Loose task lists keep their spacing, the checkbox renders inside the
paragraph like on GitHub
- Footnote references render as `[1]` so adjacent ones stay apart
without CSS
- Code in headings, headings in summaries, nested ordered lists, tables,
`<mark>`, alert icons and `<hr>` follow GitHub

Co-authored-by: bircni <bircni@icloud.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/markup/content.css

@@ -86,6 +86,7 @@
 .markup h5 code,
 .markup h6 tt,
 .markup h6 code {
+  padding: 0 0.2em;
   font-size: inherit;
 }
 
@@ -118,6 +119,16 @@
   color: var(--color-text-light-2);
 }
 
+.markup summary :is(h1, h2, h3, h4, h5, h6) {
+  display: inline-block;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.markup summary .anchor {
+  margin-inline-start: -40px; /* clear the disclosure marker */
+}
+
 .markup p,
 .markup blockquote,
 .markup details,
@@ -138,8 +149,12 @@ In markup content, we always use bottom margin for all elements */
   margin-bottom: 16px;
 }
 
+.markup p {
+  line-height: inherit; /* override base.css */
+}
+
 .markup hr {
-  height: 4px;
+  height: 1px;
   padding: 0;
   margin: 16px 0;
   background-color: var(--color-secondary);
@@ -159,10 +174,6 @@ In markup content, we always use bottom margin for all elements */
   margin-top: 4px;
 }
 
-.markup .task-list-item p + ul {
-  margin-top: 16px;
-}
-
 .markup .task-list-item input[type="checkbox"] {
   margin-bottom: 0.25em;
   margin-inline: -1.4em 0.6em;
@@ -170,13 +181,10 @@ In markup content, we always use bottom margin for all elements */
   padding: 0;
 }
 
-.markup .task-list-item input[type="checkbox"] + p {
-  margin-inline-start: -0.2em;
-  display: inline;
-}
-
-.markup .task-list-item > p {
-  margin-inline: 16px;
+/* a paragraph with another direction than its list has no list padding to hang the checkbox into */
+.markup :is(ul, ol):dir(ltr) > .task-list-item > p:dir(rtl) > input[type="checkbox"]:first-child,
+.markup :is(ul, ol):dir(rtl) > .task-list-item > p:dir(ltr) > input[type="checkbox"]:first-child {
+  margin-inline-start: 0;
 }
 
 .markup .task-list-item + .task-list-item {
@@ -200,11 +208,14 @@ In markup content, we always use bottom margin for all elements */
   margin-bottom: 0;
 }
 
-.markup ol ol,
-.markup ul ol {
+.markup :is(ol, ul) ol:not([type]) {
   list-style-type: lower-roman;
 }
 
+.markup :is(ol, ul) :is(ol, ul) ol:not([type]) {
+  list-style-type: lower-alpha;
+}
+
 .markup li > p {
   margin-top: 16px;
 }
@@ -225,13 +236,18 @@ In markup content, we always use bottom margin for all elements */
   font-weight: var(--font-weight-semibold);
 }
 
+.markup dl dt + dt {
+  margin-top: 0;
+}
+
 .markup dl dd {
   padding: 0 16px;
+  margin-inline-start: 0;
   margin-bottom: 16px;
 }
 
 .markup blockquote {
-  margin-inline-start: 0;
+  margin-inline: 0;
   padding: 0 15px;
   color: var(--color-text-light-2);
   border-left: 0.25em solid var(--color-secondary);
@@ -250,6 +266,11 @@ In markup content, we always use bottom margin for all elements */
   width: 100%;
   max-width: 100%;
   overflow: auto;
+  font-variant: tabular-nums;
+}
+
+.markup table td > :last-child {
+  margin-bottom: 0;
 }
 
 .markup table th {
@@ -297,17 +318,8 @@ html[data-gitea-theme-dark="false"] .markup img[src*="#gh-dark-mode-only"] {
   padding: 0; /* let the file-not-rendered-prompt layout itself */
 }
 
-/* this background ensures images can break <hr>. We can only do this on
-   cases where the background is known and not transparent. */
-.file-view.markup img,
-.file-view.markup video,
-.comment-body .markup img, /* regular comment */
-.comment-body .markup video,
-.comment-content .markup img, /* code comment */
-.comment-content .markup video,
-.wiki .markup img,
-.wiki .markup video {
-  background: var(--color-box-body);
+.markup :is(h1, h2, hr) {
+  display: flow-root; /* keep borders clear of floated images */
 }
 
 .markup img[align="right"],
@@ -401,6 +413,7 @@ html[data-gitea-theme-dark="false"] .markup img[src*="#gh-dark-mode-only"] {
   background-color: var(--color-markup-code-inline);
   border: 1px solid var(--color-secondary);
   border-radius: var(--border-radius);
+  max-width: 100%;
 }
 
 .markup details.frontmatter-content summary {
@@ -511,3 +524,11 @@ the manually written code-block elements on "packages" pages don't have the cont
 .markup .auto-hide-control .ui.button:active {
   background: var(--color-secondary-dark-1) !important;
 }
+
+.markup .color-preview {
+  display: inline-block;
+  margin-left: 0.4em;
+  height: 0.67em;
+  width: 0.67em;
+  border-radius: var(--border-radius);
+}