sooo, after some digging pandoc cannot use every font you want, at least i didnt find it. Lately i played with python-markdown and checked if there is also a way. There is a python package to place/replace tags in html. So combining them with css and you get a live Webview. Most styles are preserved with copy-paste.
Usage:
Save both files, or do your own css.
Terminal.app:
python3 Bike-Webview.py Example.bike Nice.css
Open Safari: http://127.0.0.1:5000
Note:
The filename is added as h1 html tag, exact as you use it as shell parameter… for sure there is a way to make it a filepath and extract filename. I dont use h1 because then i can just CMD+A, CMD+C. To remove it, just remove the whole block starting with “# H1” in the py app.
I am a sysadmin, no dev, having fun. So this is really basic scraped stuff, and the css should get some cleanup. Anyway:
Bike-Webview.py:
import sys
from flask import Flask, render_template_string
from bs4 import BeautifulSoup
app = Flask(__name__)
@app.route('/')
def serve_modified_html():
bike_file = sys.argv[1]
css_file = sys.argv[2]
# HTML-Datei einlesen
with open(bike_file, 'r') as file:
html = file.read()
# CSS-Datei einlesen
with open(css_file, 'r') as file:
css = file.read()
# BeautifulSoup-Objekt erstellen
soup = BeautifulSoup(html, 'html.parser')
# CSS-Tag erstellen und CSS-Regeln einfügen
css_tag = soup.new_tag('style')
css_tag.string = css
# CSS-Tag zum head-Bereich hinzufügen
head_tag = soup.head
head_tag.append(css_tag)
# H1 erstellen
h1_tag = soup.new_tag('h1')
h1_tag.string = bike_file
# h1-Tag zum body-Bereich hinzufügen
body_tag = soup.body
body_tag.insert_before(h1_tag)
# Modifiziertes HTML als String zurückgeben
modified_html = str(soup)
return render_template_string(modified_html)
if __name__ == '__main__':
app.run()
Nice.css:
/* @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); */
/* @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); */
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap');
a,b,abbr, blockquote, code, div, i, iframe, kbd, li, ol, p, pre, s, span, strike, strong, table, tbody, td, th, thead, tr, tt, u, ul {
margin: 0;
#padding: 0;
border: 0;
font: inherit;
vertical-align:baseline
}
html {
scroll-behavior:smooth
}
@media screen and (prefers-reduced-motion: reduce) {
body {
scroll-behavior:auto
}
}
/* Body */
body {
background: #FCFCFC;
font-family: IBM Plex Sans;
# font-family: Roboto;
/* "default"
font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
*/
color: #333333;
font-size: 14,5px;
line-height: 1.5;
margin: 0 auto;
max-width: 740px;
padding: 0;
text-rendering: optimizeLegibility;
position: relative;
overflow-y: scroll;
overflow-x: hidden;
}
/* Headings */
h1 {
font-weight: 600;
line-height: 1.3;
margin: 1em 0 0.5em;
color: #444444;
}
h1 {
font-size: 36px;
text-align: center;
}
a {
text-decoration: none;
color:inherit
}
a:active, a:hover {
outline:0
}
a {
color: #007aff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.b, b:not([class]) {
font-weight:600
}
.b.is-strong {
font-weight:700
}
.strong, strong:not([class]) {
font-weight:700
}
.em, .i, em:not([class]), i:not([class]) {
font-style:italic
}
ul li, ol li {
margin-top: 0.5em;
margin-bottom: 0.5em;
line-height: 1.5;
}
.ol ol, .ol ul, .ul ol, .ul ul, ol:not([class]) ol, ol:not([class]) ul, ul:not([class]) ol, ul:not([class]) ul {
margin-top: 0;
margin-bottom:0
}
.ul ul, ul:not([class]) ul {
list-style:circle
}
.ol, .ul, ol:not([class]), ul:not([class]) {
margin-bottom: 1.4em;
padding-left:1.5em
}
.ol, .ul, ol:not([class]), ul:not([class]) {
margin-bottom: 1.4em;
padding-left:1.5em
}
.ul, ul:not([class]) {
list-style:disc
}
.ol, ol:not([class]) {
list-style:decimal
}
.li::marker, li:not([class])::marker {
color:rgba(0, 15, 36, .46)
}
.mark, mark:not([class]) {
padding: 0 .25em;
color: inherit;
background-color: #fcf9cf;
border-radius:.25em
}
code {
padding: 0.2em 0.4em;
background: #F1F1F1;
color: #444444;
border: 1px solid rgba(0, 48, 111, .04);
border-radius: .5em;
font-family: IBM Plex Mono;
# font-family: Roboto Mono;
/* font-family: ui-monospace, SFMono-Regular, Menlo, "Andale Mono", Consolas, Monaco, monospace; */
font-size: 0.9em;
}
.code, code:not([class]) {
padding: 0 .25em;
background: #F1F1F1;
color: rgba(0, 4, 10, .69);
#border: 1px solid rgba(0, 48, 111, .04);
border-radius: 3px;
font-family: IBM Plex Mono;
# font-family: Roboto Mono;
/* font-family: ui-monospace, SFMono-Regular, Menlo, "Andale Mono", Consolas, Monaco, monospace; */
font-size: 14;
line-height: 1.4;
white-space: pre-wrap;
word-wrap:break-word;
}
I hope such post is ok for you all. Maybe me or some real dev in here got a “fine” way to add parameters. Shortcuts should be no problem.