I am trying to use flask-flatpages to render my markdown post. Markdown extension is fenced_code_blocks, so I set FLATPAGES_MARKDOWN_EXTENSIONS = ['fenced_code']
for flatpages-flask. And also I want to highlight my code using pygments
css. Create css view :
@app.route('/pygments.css')
def pygments_css():
return pygments_style_defs('tango'), 200, {'Content-Type':"text/css"}
Jinja2 template html is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ url_for('pygments_css') }}">
</head>
{{ post.html|safe}}
<body>
</body>
</html>
But the final html is not highlighted, pygments.css
contains codehilite
which is default markdown extension in flask-flatpages
# part of pygments.css
.codehilite .hll { background-color: #ffffcc }
.codehilite { background: #f8f8f8; }
.codehilite .c { color: #8f5902; font-style: italic } /* Comment */
.codehilite .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
.codehilite .g { color: #000000 } /* Generic */
.codehilite .k { color: #204a87; font-weight: bold } /* Keyword */
.codehilite .l { color: #000000 } /* Literal */
.codehilite .n { color: #000000 } /* Name */
.codehilite .o { color: #ce5c00; font-weight: bold } /* Operator */
.codehilite .x { color: #000000 } /* Other */
To highlight fenced code block rendered html, I should use fenced code block style css. Is it anyway to get fenced code block hightlight css file?