Home | Projects | Notes > Website > Typora Settings

Typora Settings

Export to HTML

export-html

Add the following code to Append in <head /> section to insert favicon:


2
1
<title>Kyungjae's Website</title>
2
<link rel="icon" type="image/x-icon" href="img/favicon.png">

The favicon image must be resized to the optimal dimensions for favicon use.

Add the following code to Append in <body /> to add footer to each page:


3
1
<footer>
2
<p style="text-align: center;"><i>- Original works by Kyungjae Lee -</i></p>
3
</footer>

Markdown Settings

markdown-settings

Code Block Settings

Find the .css file for your theme and add the following code to make sure your code block looks good on any mobile devices:


22
1
/* Code block settings. */
2
pre {
3
    white-space: pre;             /* Keep formatting, no wrapping */
4
    overflow-x: auto;             /* Enable horizontal scroll */
5
    font-size: 1em;               /* Base font size, adjustable */
6
    max-width: 100vw;             /* Ensure it doesn't overflow screen */
7
    box-sizing: border-box;       /* Include padding in width calculation */
8
    padding: 1em;                 /* Optional: clean spacing */
9
}
10

11
/* Optional: Adjust font size slightly for small screens */
12
@media (max-width: 768px) {
13
pre {
14
    font-size: 0.9em;           /* Slightly smaller font on tablets and phones */
15
}
16
}
17

18
@media (max-width: 480px) {
19
pre {
20
    font-size: 0.85em;          /* Even smaller font on very small phones */
21
}
22
}

For me, it was github.css file under Typora/themes/.