Mirror
/
tildes
mirror of https://gitlab.com/tildes/tildes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add Pygments syntax highlighting to code blocks

merge-requests/40/head
Petr Stastny 6 years ago
committed by Deimos
parent
bda5be27fe
commit
c2c483726c
3 changed files with 210 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      tildes/requirements-to-freeze.txt
  2. 146
      tildes/scss/_themes.scss
  3. 63
      tildes/tildes/lib/markdown.py

1
tildes/requirements-to-freeze.txt
View File

@ -17,6 +17,7 @@ prometheus-client
prospector prospector
psycopg2 psycopg2
publicsuffix2 publicsuffix2
Pygments
pyotp pyotp
pyramid pyramid
pyramid-debugtoolbar pyramid-debugtoolbar

146
tildes/scss/_themes.scss
View File

@ -39,6 +39,8 @@
background-color: $background-alt-color; background-color: $background-alt-color;
color: $text-color; color: $text-color;
@include syntaxhighlighting($is-light);
blockquote { blockquote {
background-color: $background-alt-color; background-color: $background-alt-color;
border-color: $text-highlight-color; border-color: $text-highlight-color;
@ -288,6 +290,150 @@
} }
} }
@mixin syntaxhighlighting($is-light){
@if ($is-light) {
.highlight { background-color: #eeeeee; color: #31383a }
.highlight .syntax_c { color: #129b12 } /* Comment */
.highlight .syntax_err { color: #333333 } /* Error */
.highlight .syntax_g { color: #333333 } /* Generic */
.highlight .syntax_k { color: #3329c2 } /* Keyword */
.highlight .syntax_l { color: #333333 } /* Literal */
.highlight .syntax_n { color: #333333 } /* Name */
.highlight .syntax_o { color: #859900 } /* Operator */
.highlight .syntax_x { color: #cb4b16 } /* Other */
.highlight .syntax_p { color: #333333 } /* Punctuation */
.highlight .syntax_cm { color: #129b12 } /* Comment.Multiline */
.highlight .syntax_cp { color: #859900 } /* Comment.Preproc */
.highlight .syntax_c1 { color: #129b12 } /* Comment.Single */
.highlight .syntax_cs { color: #859900 } /* Comment.Special */
.highlight .syntax_gd { color: #2aa198 } /* Generic.Deleted */
.highlight .syntax_ge { color: #333333; font-style: italic } /* Generic.Emph */
.highlight .syntax_gr { color: #dc322f } /* Generic.Error */
.highlight .syntax_gh { color: #cb4b16 } /* Generic.Heading */
.highlight .syntax_gi { color: #859900 } /* Generic.Inserted */
.highlight .syntax_go { color: #333333 } /* Generic.Output */
.highlight .syntax_gp { color: #333333 } /* Generic.Prompt */
.highlight .syntax_gs { color: #333333; font-weight: bold } /* Generic.Strong */
.highlight .syntax_gu { color: #cb4b16 } /* Generic.Subheading */
.highlight .syntax_gt { color: #333333 } /* Generic.Traceback */
.highlight .syntax_kc { color: #cb4b16 } /* Keyword.Constant */
.highlight .syntax_kd { color: #268bd2 } /* Keyword.Declaration */
.highlight .syntax_kn { color: #859900 } /* Keyword.Namespace */
.highlight .syntax_kp { color: #859900 } /* Keyword.Pseudo */
.highlight .syntax_kr { color: #268bd2 } /* Keyword.Reserved */
.highlight .syntax_kt { color: #3329c2 } /* Keyword.Type */
.highlight .syntax_ld { color: #333333 } /* Literal.Date */
.highlight .syntax_m { color: #2aa198 } /* Literal.Number */
.highlight .syntax_s { color: #2aa198 } /* Literal.String */
.highlight .syntax_na { color: #333333 } /* Name.Attribute */
.highlight .syntax_nb { color: #B58900 } /* Name.Builtin */
.highlight .syntax_nc { color: #268bd2 } /* Name.Class */
.highlight .syntax_no { color: #cb4b16 } /* Name.Constant */
.highlight .syntax_nd { color: #268bd2 } /* Name.Decorator */
.highlight .syntax_ni { color: #cb4b16 } /* Name.Entity */
.highlight .syntax_ne { color: #cb4b16 } /* Name.Exception */
.highlight .syntax_nf { color: #268bd2 } /* Name.Function */
.highlight .syntax_nl { color: #333333 } /* Name.Label */
.highlight .syntax_nn { color: #333333 } /* Name.Namespace */
.highlight .syntax_nx { color: #333333 } /* Name.Other */
.highlight .syntax_py { color: #333333 } /* Name.Property */
.highlight .syntax_nt { color: #268bd2 } /* Name.Tag */
.highlight .syntax_nv { color: #268bd2 } /* Name.Variable */
.highlight .syntax_ow { color: #859900 } /* Operator.Word */
.highlight .syntax_w { color: #333333 } /* Text.Whitespace */
.highlight .syntax_mf { color: #2aa198 } /* Literal.Number.Float */
.highlight .syntax_mh { color: #2aa198 } /* Literal.Number.Hex */
.highlight .syntax_mi { color: #2aa198 } /* Literal.Number.Integer */
.highlight .syntax_mo { color: #2aa198 } /* Literal.Number.Oct */
.highlight .syntax_sb { color: #129b12 } /* Literal.String.Backtick */
.highlight .syntax_sc { color: #2aa198 } /* Literal.String.Char */
.highlight .syntax_sd { color: #333333 } /* Literal.String.Doc */
.highlight .syntax_s2 { color: #2aa198 } /* Literal.String.Double */
.highlight .syntax_se { color: #cb4b16 } /* Literal.String.Escape */
.highlight .syntax_sh { color: #333333 } /* Literal.String.Heredoc */
.highlight .syntax_si { color: #2aa198 } /* Literal.String.Interpol */
.highlight .syntax_sx { color: #2aa198 } /* Literal.String.Other */
.highlight .syntax_sr { color: #dc322f } /* Literal.String.Regex */
.highlight .syntax_s1 { color: #2aa198 } /* Literal.String.Single */
.highlight .syntax_ss { color: #2aa198 } /* Literal.String.Symbol */
.highlight .syntax_bp { color: #268bd2 } /* Name.Builtin.Pseudo */
.highlight .syntax_vc { color: #268bd2 } /* Name.Variable.Class */
.highlight .syntax_vg { color: #268bd2 } /* Name.Variable.Global */
.highlight .syntax_vi { color: #268bd2 } /* Name.Variable.Instance */
.highlight .syntax_il { color: #2aa198 } /* Literal.Number.Integer.Long */
} @else {
.highlight { background-color: #002b36; color: #93a1a1; }
.highlight .syntax_c { color: #759299; }
.highlight .syntax_err { color: #93a1a1; }
.highlight .syntax_g { color: #93a1a1; }
.highlight .syntax_k { color: #859900; }
.highlight .syntax_l { color: #93a1a1; }
.highlight .syntax_n { color: #93a1a1; }
.highlight .syntax_o { color: #859900; }
.highlight .syntax_x { color: #e9662f; }
.highlight .syntax_p { color: #93a1a1; }
.highlight .syntax_cm { color: #759299; }
.highlight .syntax_cp { color: #859900; }
.highlight .syntax_c1 { color: #759299; }
.highlight .syntax_cs { color: #859900; }
.highlight .syntax_gd { color: #2aa198; }
.highlight .syntax_ge { color: #93a1a1; font-style: italic; }
.highlight .syntax_gr { color: #e8625f; }
.highlight .syntax_gh { color: #e9662f; }
.highlight .syntax_gi { color: #859900; }
.highlight .syntax_go { color: #93a1a1; }
.highlight .syntax_gp { color: #93a1a1; }
.highlight .syntax_gs { color: #93a1a1; font-weight: bold; }
.highlight .syntax_gu { color: #e9662f; }
.highlight .syntax_gt { color: #93a1a1; }
.highlight .syntax_kc { color: #e9662f; }
.highlight .syntax_kd { color: #3294da; }
.highlight .syntax_kn { color: #859900; }
.highlight .syntax_kp { color: #859900; }
.highlight .syntax_kr { color: #3294da; }
.highlight .syntax_kt { color: #e8625f; }
.highlight .syntax_ld { color: #93a1a1; }
.highlight .syntax_m { color: #2aa198; }
.highlight .syntax_s { color: #2aa198; }
.highlight .syntax_na { color: #93a1a1; }
.highlight .syntax_nb { color: #B58900; }
.highlight .syntax_nc { color: #3294da; }
.highlight .syntax_no { color: #e9662f; }
.highlight .syntax_nd { color: #3294da; }
.highlight .syntax_ni { color: #e9662f; }
.highlight .syntax_ne { color: #e9662f; }
.highlight .syntax_nf { color: #3294da; }
.highlight .syntax_nl { color: #93a1a1; }
.highlight .syntax_nn { color: #93a1a1; }
.highlight .syntax_nx { color: #93a1a1; }
.highlight .syntax_py { color: #93a1a1; }
.highlight .syntax_nt { color: #3294da; }
.highlight .syntax_nv { color: #3294da; }
.highlight .syntax_ow { color: #859900; }
.highlight .syntax_w { color: #93a1a1; }
.highlight .syntax_mf { color: #2aa198; }
.highlight .syntax_mh { color: #2aa198; }
.highlight .syntax_mi { color: #2aa198; }
.highlight .syntax_mo { color: #2aa198; }
.highlight .syntax_sb { color: #759299; }
.highlight .syntax_sc { color: #2aa198; }
.highlight .syntax_sd { color: #93a1a1; }
.highlight .syntax_s2 { color: #2aa198; }
.highlight .syntax_se { color: #e9662f; }
.highlight .syntax_sh { color: #93a1a1; }
.highlight .syntax_si { color: #2aa198; }
.highlight .syntax_sx { color: #2aa198; }
.highlight .syntax_sr { color: #e8625f; }
.highlight .syntax_s1 { color: #2aa198; }
.highlight .syntax_ss { color: #2aa198; }
.highlight .syntax_bp { color: #3294da; }
.highlight .syntax_vc { color: #3294da; }
.highlight .syntax_vg { color: #3294da; }
.highlight .syntax_vi { color: #3294da; }
.highlight .syntax_il { color: #2aa198; }
}
}
body { body {
@include theme-dependent($background-color: #fff, $background-alt-color: #eee, $text-color: #333, $text-highlight-color: #222, $text-secondary-color: #999, $border-color: #ccc); @include theme-dependent($background-color: #fff, $background-alt-color: #eee, $text-color: #333, $text-highlight-color: #222, $text-secondary-color: #999, $border-color: #ccc);
} }

63
tildes/tildes/lib/markdown.py
View File

@ -17,12 +17,17 @@ from typing import (
) )
from urllib.parse import urlparse from urllib.parse import urlparse
from bs4 import BeautifulSoup
import bleach import bleach
import html5lib import html5lib
from html5lib import HTMLParser from html5lib import HTMLParser
from html5lib.filters.base import Filter from html5lib.filters.base import Filter
from html5lib.serializer import HTMLSerializer from html5lib.serializer import HTMLSerializer
from html5lib.treewalkers.base import NonRecursiveTreeWalker from html5lib.treewalkers.base import NonRecursiveTreeWalker
from pygments import highlight
from pygments.formatters import HtmlFormatter
from pygments.lexers import get_lexer_by_name
from pygments.util import ClassNotFound
from tildes.metrics import histogram_timer from tildes.metrics import histogram_timer
from tildes.schemas.group import is_valid_group_path from tildes.schemas.group import is_valid_group_path
@ -42,6 +47,30 @@ from .cmark import (
) )
def allow_syntax_highlighting_classes(tag: str, name: str, value: str) -> bool:
"""Allow all CSS classes from Pygments.
These classes always begin with 'syntax_'. We need to allow
.highlight class as well, as Pygments use it to group syntax
highlighting classes.
"""
return (" " not in value) and (
(value.startswith("syntax_") and tag == "span")
or (value == "highlight" and tag == "div")
)
def allow_language_info_string(tag: str, name: str, value: str) -> bool:
"""Allow language info strings on code tag.
Info string is the thing that you write after ``` markdown.
For example in ```csharp the info string will be 'csharp'.
The class is 'language-<language', for example 'language-csharp'.
"""
return (" " not in value) and (tag == "code" and value.startswith("language-"))
HTML_TAG_WHITELIST = ( HTML_TAG_WHITELIST = (
"a", "a",
"b", "b",
@ -49,6 +78,7 @@ HTML_TAG_WHITELIST = (
"br", "br",
"code", "code",
"del", "del",
"div",
"em", "em",
"h1", "h1",
"h2", "h2",
@ -66,6 +96,7 @@ HTML_TAG_WHITELIST = (
"strong", "strong",
"sub", "sub",
"sup", "sup",
"span",
"table", "table",
"tbody", "tbody",
"td", "td",
@ -79,6 +110,9 @@ HTML_ATTRIBUTE_WHITELIST = {
"ol": ["start"], "ol": ["start"],
"td": ["align"], "td": ["align"],
"th": ["align"], "th": ["align"],
"code": allow_language_info_string,
"div": allow_syntax_highlighting_classes,
"span": allow_syntax_highlighting_classes,
} }
PROTOCOL_WHITELIST = ("http", "https") PROTOCOL_WHITELIST = ("http", "https")
@ -182,6 +216,35 @@ def postprocess_markdown_html(html: str) -> str:
# run the HTML through our custom linkification process as well # run the HTML through our custom linkification process as well
html = apply_linkification(html, skip_tags=linkify_skipped_tags) html = apply_linkification(html, skip_tags=linkify_skipped_tags)
# apply syntax highlighting to code blocks
html = apply_syntax_highlighting(html)
return html
def apply_syntax_highlighting(html: str) -> str:
"""Get all code blocks with defined info string in class and highlight them."""
soup = BeautifulSoup(html, features="html5lib")
# Get all code blocks and for every code block that has info string
code_blocks = soup.find_all("code", class_=re.compile("^language-"))
for code_block in code_blocks:
# Apply Pygments
language = code_block["class"][0].replace("language-", "")
try:
lexer = get_lexer_by_name(language)
except ClassNotFound:
continue
highlighted = highlight(
code_block.text,
lexer,
HtmlFormatter(
classprefix="syntax_" # All highlight classes will be
# prefixed with 'syntax_'
),
)
html = html.replace(str(code_block.parent), highlighted, 1)
return html return html

Write Preview
Loading…
Cancel
Save