Serverside markdown rendering test
This commit is contained in:
MatthiasSaihttam
parent
697de9c5f4
commit
ff50f94d0b
|
|
@ -0,0 +1,53 @@
|
|||
pre { line-height: 125%; }
|
||||
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
|
||||
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
|
||||
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
|
||||
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
|
||||
.codehilite .hll { background-color: #49483e }
|
||||
.codehilite { background: #232629; color: #cccccc }
|
||||
.codehilite .c { color: #777777; font-style: italic } /* Comment */
|
||||
.codehilite .err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
||||
.codehilite .k { color: #7686bb; font-weight: bold } /* Keyword */
|
||||
.codehilite .ch { color: #777777; font-style: italic } /* Comment.Hashbang */
|
||||
.codehilite .cm { color: #777777; font-style: italic } /* Comment.Multiline */
|
||||
.codehilite .cp { color: #777777; font-style: italic } /* Comment.Preproc */
|
||||
.codehilite .cpf { color: #777777; font-style: italic } /* Comment.PreprocFile */
|
||||
.codehilite .c1 { color: #777777; font-style: italic } /* Comment.Single */
|
||||
.codehilite .cs { color: #777777; font-style: italic } /* Comment.Special */
|
||||
.codehilite .gp { color: #ffffff } /* Generic.Prompt */
|
||||
.codehilite .kc { color: #7686bb; font-weight: bold } /* Keyword.Constant */
|
||||
.codehilite .kd { color: #7686bb; font-weight: bold } /* Keyword.Declaration */
|
||||
.codehilite .kn { color: #7686bb; font-weight: bold } /* Keyword.Namespace */
|
||||
.codehilite .kp { color: #7686bb; font-weight: bold } /* Keyword.Pseudo */
|
||||
.codehilite .kr { color: #7686bb; font-weight: bold } /* Keyword.Reserved */
|
||||
.codehilite .kt { color: #7686bb; font-weight: bold } /* Keyword.Type */
|
||||
.codehilite .m { color: #4FB8CC } /* Literal.Number */
|
||||
.codehilite .s { color: #51cc99 } /* Literal.String */
|
||||
.codehilite .nf { color: #6a6aff } /* Name.Function */
|
||||
.codehilite .nx { color: #e2828e } /* Name.Other */
|
||||
.codehilite .nv { color: #7AB4DB; font-weight: bold } /* Name.Variable */
|
||||
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.codehilite .mb { color: #4FB8CC } /* Literal.Number.Bin */
|
||||
.codehilite .mf { color: #4FB8CC } /* Literal.Number.Float */
|
||||
.codehilite .mh { color: #4FB8CC } /* Literal.Number.Hex */
|
||||
.codehilite .mi { color: #4FB8CC } /* Literal.Number.Integer */
|
||||
.codehilite .mo { color: #4FB8CC } /* Literal.Number.Oct */
|
||||
.codehilite .sa { color: #51cc99 } /* Literal.String.Affix */
|
||||
.codehilite .sb { color: #51cc99 } /* Literal.String.Backtick */
|
||||
.codehilite .sc { color: #51cc99 } /* Literal.String.Char */
|
||||
.codehilite .dl { color: #51cc99 } /* Literal.String.Delimiter */
|
||||
.codehilite .sd { color: #51cc99 } /* Literal.String.Doc */
|
||||
.codehilite .s2 { color: #51cc99 } /* Literal.String.Double */
|
||||
.codehilite .se { color: #51cc99 } /* Literal.String.Escape */
|
||||
.codehilite .sh { color: #51cc99 } /* Literal.String.Heredoc */
|
||||
.codehilite .si { color: #51cc99 } /* Literal.String.Interpol */
|
||||
.codehilite .sx { color: #51cc99 } /* Literal.String.Other */
|
||||
.codehilite .sr { color: #51cc99 } /* Literal.String.Regex */
|
||||
.codehilite .s1 { color: #51cc99 } /* Literal.String.Single */
|
||||
.codehilite .ss { color: #51cc99 } /* Literal.String.Symbol */
|
||||
.codehilite .fm { color: #6a6aff } /* Name.Function.Magic */
|
||||
.codehilite .vc { color: #7AB4DB; font-weight: bold } /* Name.Variable.Class */
|
||||
.codehilite .vg { color: #BE646C; font-weight: bold } /* Name.Variable.Global */
|
||||
.codehilite .vi { color: #7AB4DB; font-weight: bold } /* Name.Variable.Instance */
|
||||
.codehilite .vm { color: #7AB4DB; font-weight: bold } /* Name.Variable.Magic */
|
||||
.codehilite .il { color: #4FB8CC } /* Literal.Number.Integer.Long */
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
{% load static %}
|
||||
<link href="{% static 'main/main.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'main/codehighlight.css' %}" rel="stylesheet">
|
||||
|
||||
<link rel="icon" sizes="192x192" href="{% static 'images/favicon-192x192.png'%}">
|
||||
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png'%}"/>
|
||||
|
|
@ -30,13 +31,14 @@
|
|||
|
||||
<section class="main-wrap">
|
||||
{% load tz %}
|
||||
{% load markdown %}
|
||||
|
||||
{% for thought in thoughts %}
|
||||
<div class="thought{% if thought.uuid == highlighted %} highlighted{% endif %}" id="{{thought.uuid}}">
|
||||
<div class="main">
|
||||
<span class="main-text text">{{thought.text}}</span>
|
||||
<span class="main-text text">{{ thought.text|markdown }}</span>
|
||||
</div>
|
||||
<div class="extended-text text">{{thought.extended_text}}</div>
|
||||
<div class="extended-text text">{{ thought.extended_text|markdown }}</div>
|
||||
<div class="thought-end">
|
||||
<span class="timestamp">
|
||||
{% timezone thought.timezone %}
|
||||
|
|
@ -91,8 +93,8 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/tomorrow-night.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/highlight.min.js"></script>
|
||||
{# <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/tomorrow-night.min.css">#}
|
||||
{# <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/highlight.min.js"></script>#}
|
||||
|
||||
<!--Remarkable UMD bundle, includes linkify and Remarkable in the global remarkable-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/remarkable.min.js"></script>
|
||||
|
|
@ -105,7 +107,7 @@
|
|||
|
||||
|
||||
|
||||
const md = new remarkable.Remarkable({
|
||||
/*const md = new remarkable.Remarkable({
|
||||
html: false, breaks: true, typographer: true,
|
||||
highlight: function (str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
|
|
@ -128,7 +130,7 @@
|
|||
//Markdown + highlight
|
||||
extended.innerHTML = md.render(extended.textContent);
|
||||
mainText.innerHTML = md.render(mainText.textContent);
|
||||
}
|
||||
}*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
from django import template
|
||||
from django.utils.safestring import mark_safe
|
||||
import markdown
|
||||
import bleach
|
||||
from django.utils.html import escape
|
||||
from markdown.extensions import Extension
|
||||
|
||||
class EscapeHtml(Extension):
|
||||
def extendMarkdown(self, md):
|
||||
md.preprocessors.deregister('html_block')
|
||||
md.inlinePatterns.deregister('html')
|
||||
|
||||
register = template.Library()
|
||||
|
||||
md = markdown.Markdown(extensions=["fenced_code", "nl2br", "smarty", "codehilite", EscapeHtml()])
|
||||
|
||||
@register.filter(needs_autoescape=True)
|
||||
def markdown(value, autoescape=True):
|
||||
html = mark_safe(bleach.linkify(md.convert(value)))
|
||||
# html = value
|
||||
md.reset()
|
||||
return html
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
bleach==3.3.0
|
||||
Django==3.1.7
|
||||
Markdown==3.3.4
|
||||
|
|
@ -23,7 +23,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent
|
|||
SECRET_KEY = 'qdm4_0b)3^)k$6r($!o^a7&0l#^6)@g2wr!x0r40ii@9otfnwo'
|
||||
|
||||
# SECURITY WARNING: don't run with debug turned on in production!
|
||||
DEBUG = False
|
||||
DEBUG = True
|
||||
|
||||
ALLOWED_HOSTS = ["thoughts.learnerpages.com"]
|
||||
if DEBUG:
|
||||
|
|
|
|||
Loading…
Reference in New Issue