122 lines
3.5 KiB
Plaintext
122 lines
3.5 KiB
Plaintext
TAGS: ConvertPy
|
|
=== QUESTION ===
|
|
Please write a script to convert markdown to static HTML, use solarized dark color scheme. Please make it in the way, that the output looks nice on a smartphone, tablet and desktop, with proper font sizes. Use "Space Mono" font.
|
|
==== ANSWER ====
|
|
Sure! To make the webpage responsive, we will use CSS media queries to adjust the layout and font sizes based on the device size. We will also include the "Space Mono" font from Google Fonts.
|
|
|
|
```python
|
|
import sys
|
|
import mistune
|
|
|
|
def markdown_to_html(filename):
|
|
with open(filename, 'r', encoding='utf-8') as file:
|
|
markdown_content = file.read()
|
|
|
|
html_content = mistune.markdown(markdown_content)
|
|
|
|
solarized_dark_css = """
|
|
/* Solarized Dark Theme Colors */
|
|
:root {
|
|
--solarized-base03: #002b36;
|
|
--solarized-base02: #073642;
|
|
--solarized-base01: #586e75;
|
|
--solarized-base00: #657b83;
|
|
--solarized-base0: #839496;
|
|
--solarized-base1: #93a1a1;
|
|
--solarized-yellow: #b58900;
|
|
--solarized-orange: #cb4b16;
|
|
}
|
|
|
|
body {
|
|
font-family: 'CMUTypewriterTextRegular';
|
|
background-color: var(--solarized-base03);
|
|
color: var(--solarized-base1);
|
|
margin: 0;
|
|
padding: 2em;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1, h2 {
|
|
color: var(--solarized-yellow);
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
a {
|
|
color: var(--solarized-orange);
|
|
text-decoration: none;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: square;
|
|
margin: 1em;
|
|
padding: 0;
|
|
}
|
|
|
|
ul li {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
/* Adjusting layout and text size for different devices */
|
|
@media (max-width: 600px) {
|
|
body {
|
|
font-size: 16px;
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 601px) and (max-width: 1024px) {
|
|
body {
|
|
font-size: 18px;
|
|
padding: 2em;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1025px) {
|
|
body {
|
|
font-size: 20px;
|
|
padding: 3em;
|
|
}
|
|
}
|
|
"""
|
|
|
|
template = f"""
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://fontlibrary.org//face/cmu-typewriter" type="text/css"/>
|
|
<style>
|
|
{solarized_dark_css}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{html_content}
|
|
</body>
|
|
</html>
|
|
"""
|
|
|
|
output_filename = filename.replace(".md", ".html")
|
|
with open(output_filename, 'w', encoding='utf-8') as file:
|
|
file.write(template)
|
|
|
|
print(f"Converted {filename} to {output_filename}")
|
|
|
|
|
|
if __name__ == "__main__":
|
|
if len(sys.argv) < 2:
|
|
print("Usage: python scriptname.py markdown_file.md")
|
|
sys.exit(1)
|
|
|
|
for filename in sys.argv[1:]:
|
|
markdown_to_html(filename)
|
|
```
|
|
|
|
This script will now adjust the padding and font size of the body text depending on the width of the viewing device. It includes breakpoints for devices with a max-width of 600px (typically smartphones), between 601px and 1024px (typically tablets), and larger than 1025px (typically desktops). The font has been changed to "Space Mono".
|