Skip to content

💄 style(markdown): 优化 markdown 渲染器并增强内容样式 #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

💄 style(markdown): 优化 markdown 渲染器并增强内容样式 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion __version__
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
1.0.0
1.0.1
54 changes: 28 additions & 26 deletions themes/default/components/core/markdown/renderer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
<div class="markdown-wrapper markdown-style-{{ data.style_name | default('github-light') }}">
<article class="markdown-body">
{% macro render_elements(elements) %}
{% for element in elements %}
{% if element.type == 'component' %}
{{ render(element.component) }}
{% elif element.type == 'quote' %}
<blockquote>
{{ render_elements(element.content) }}
</blockquote>
{% elif element.type == 'list' %}
{% if element.ordered %}<ol>{% else %}<ul>{% endif %}
{{ render_elements(element.content) }}
{% if element.ordered %}</ol>{% else %}</ul>{% endif %}
{% elif element.type == 'list_item' %}
<li>
{{ render_elements(element.content) }}
</li>
{% else %}
{{ element.to_markdown() | md | safe }}
{% endif %}
{% endfor %}
{% endmacro %}
{{ render_elements(data.elements) }}
</article>
</div>
{% from 'partials/_component_macros.jinja' import wrapper %}
{% set base_class = 'markdown-wrapper markdown-style-' + (data.style_name | default('github-light')) %}
{% call wrapper(data, base_class) %}
<article class="markdown-body">
{% macro render_elements(elements) %}
{% for element in elements %}
{% if element.type == 'component' %}
{{ render(element.component) }}
{% elif element.type == 'quote' %}
<blockquote>
{{ render_elements(element.content) }}
</blockquote>
{% elif element.type == 'list' %}
{% if element.ordered %}<ol>{% else %}<ul>{% endif %}
{{ render_elements(element.content) }}
{% if element.ordered %}</ol>{% else %}</ul>{% endif %}
{% elif element.type == 'list_item' %}
<li>
{{ render_elements(element.content) }}
</li>
{% else %}
{{ element.to_markdown() | md | safe }}
{% endif %}
{% endfor %}
{% endmacro %}
{{ render_elements(data.elements) }}
</article>
{% endcall %}
100 changes: 97 additions & 3 deletions themes/default/pages/builtin/help/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,11 @@ body {
position: relative;
}
.section-content .markdown-content p {
margin-top: 0;
margin-bottom: 0.7em;
margin-top: 0;
margin-bottom: 0.7em;
}
.section-content .markdown-content p:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
.meta-box {
position: relative;
Expand Down Expand Up @@ -145,3 +145,97 @@ body {
word-break: break-all;
}

.section-content .markdown-content blockquote {
padding: 10px 15px;
margin: 15px 0;
color: var(--color-text-muted);
border-left: 4px solid var(--color-primary);
background-color: var(--color-background-card);
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-content .markdown-content blockquote p {
margin-bottom: 0;
color: var(--color-text-muted);
}

.section-content .markdown-content ul,
.section-content .markdown-content ol {
padding-left: 25px;
}

.section-content .markdown-content ul ul,
.section-content .markdown-content ol ol,
.section-content .markdown-content ul ol,
.section-content .markdown-content ol ul {
padding-left: 20px;
margin-top: 0.5em;
}

.section-content .markdown-content table {
border-spacing: 0;
border-collapse: collapse;
display: block;
width: 100%;
max-width: 100%;
overflow: auto;
margin-top: 1em;
margin-bottom: 1em;
border: 1px solid var(--color-border-light);
border-radius: 8px;
}

.section-content .markdown-content th,
.section-content .markdown-content td {
padding: 8px 12px;
border: 1px solid var(--color-border-light);
}

.section-content .markdown-content th {
font-weight: 600;
background-color: var(--color-background-card);
color: var(--color-primary-dark);
}

.section-content .markdown-content tr {
background-color: var(--color-background-main);
}

.section-content .markdown-content tr:nth-child(2n) {
background-color: var(--color-background-card);
}

.section-content .markdown-content pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: var(--color-background-card);
border: 1px solid var(--color-border-light);
border-radius: 6px;
margin: 1em 0;
}

.section-content .markdown-content code,
.section-content .markdown-content tt {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: rgba(224, 138, 159, 0.1);
border-radius: 6px;
color: var(--color-primary);
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
Liberation Mono, monospace;
}

.section-content .markdown-content pre code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
color: var(--color-text-dark);
}