Typora自定义导出HTML

Typora Export to HTML Mixin

平常喜欢用Typora编写Markdown笔记,一般来说都是导出为pdf方便阅读,有时候也导出为html文件方便直接放在静态网站上展示。

偶然发现Typora可以在导出的html文件的<head><body>中插入自定义代码。这就有了很多可玩性。

Typora screenshot

1. 官方文档这样说

Add Custom Contents

You can add custom contents in Append in and Append in , which will be inserted into part and part in the exported html. For contents that cannot be added into , even when it is added in Append in , it will be prepend into instead. Same for Append in .

Export YAML meta

Variables like ${title} or ${author} in <title> and <meta> tag will be replaced by corresponding variables defined in YAML Front Matter.

For example, you can insert additional <meta> data or custom <style> into exported html using those options, e.g:

1
2
3
<meta charset="UTF-8">
<meta name="author" content="${author}">
<meta name="description" content="${description}">

To use those variables in somewhere else, you can add some javascript in Append in <body />, to read target meta tag, and modified export content as you want.

2. 实践

官方文档中有几点需要注意

  • 变量可以写在Markdown的YAML头注释中,输入方式是三个减号---return
  • Typora只能在<head>中插入带变量的内容,如果需要在<body>中使用变量,需要先在<head>中通过<meta>引入,在<body>中通过Javascript读取<meta>中的变量再使用。

输出user agent

<body>

1
2
3
4
5
6
7
8
9
10
<script>
if(navigator.userAgentData){
var ua = navigator.userAgentData.platform || "Unknown";
ua = ua + " " + navigator.userAgentData.brands[2].brand + " var." + navigator.userAgentData.brands[2].version;
console.log("%c"+ua, "font-size:16px;background-color:black;color:white;padding:4px;margin:4px;");
}else{
var ua = navigator.userAgent;
console.log("%c"+ua, "font-size:16px;background-color:black;color:white;padding:4px;margin:4px;");
}
</script>

注意⚠️,userAgentData是新属性

效果

log user agent

输出title

<head>

1
<title>${title}</title>

<body>

1
2
3
4
<script>
var title = document.getElementsByTagName('title')[0].textContent;
console.log("%c"+"Title: "+title, "font-size:16px;background-color:black;color:white;padding:4px;margin:4px;");
</script>

效果

log title

输出自定义变量

<head>

1
<meta name="description" content="${description}">

<body>

1
2
3
4
<script>
var desp = document.getElementsByTagName('meta')['description'].content;
console.log("%c"+"Desp: "+desp, "font-size:16px;background-color:white;color:black;padding:4px;margin:4px;");
</script>

效果

log desciption

输出本页地址

<body>

1
2
3
4
<script>
var pageUrl = window.location.href;
console.log("%cPlease indicate the URL for forwarding: "+ pageUrl, "font-size:18px;background-color:yellow;color:black;padding:4px;margin:4px;")
</script>

进阶:复制页面文本时添加版权信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
function addLink(){
var pageUrl = window.location.href;
var linkContent = "<br/><br/>Please indicate the URL for forwarding: <br/>\n"+ pageUrl+"<br/>\n";
var selected = selection = window.getSelection() ? window.getSelection() : document.selection.createRange().text;
if(window.clipboardData){
window.clipboardData.setData ("Text", selected+linkContent);
}else{
var newDiv = document.createElement('div');
newDiv.style.position ='absolute';
newDiv.style.left ='-99999px';
newDiv.style.top ='-99999px';
document.body.appendChild(newDiv);
newDiv.innerHTML = selected+linkContent;
selection.selectAllChildren(newDiv);
window.setTimeout(function() {
document.body.removeChild(newDiv);
},0);
}
}
document.oncopy = addLink;
</script>

3. 完

因为是内嵌代码,理论上是支持一切网页上可以运行的内容。可以自行发掘用法。

一次设定,导出无忧。

我的<script>使用uglify压缩

1
var ua,title=document.getElementsByTagName("title")[0].textContent,updatetime=document.getElementsByTagName("meta").updatetime.content,pageUrl=(console.log("%cTitle: "+title+"\nUpdateTime: "+updatetime,"font-size:14px;background-color:black;color:white;padding:4px;margin:4px;"),ua=navigator.userAgentData?(ua=navigator.userAgentData.platform||"Unknown")+" "+navigator.userAgentData.brands[2].brand+" var."+navigator.userAgentData.brands[2].version:navigator.userAgent,console.log("%c"+ua,"font-size:14px;background-color:black;color:white;padding:4px;margin:4px;"),window.location.href);function addLink(){var e,o="<br/><br/>Please indicate the URL for forwarding: <br/>\n"+window.location.href+"<br/>\n",t=selection=window.getSelection()?window.getSelection():document.selection.createRange().text;window.clipboardData?window.clipboardData.setData("Text",t+o):((e=document.createElement("div")).style.position="absolute",e.style.left="-99999px",e.style.top="-99999px",document.body.appendChild(e),e.innerHTML=t+o,selection.selectAllChildren(e),window.setTimeout(function(){document.body.removeChild(e)},0))}console.log("%cPlease indicate the URL for forwarding: "+pageUrl,"font-size:14px;background-color:yellow;color:black;padding:4px;margin:4px;"),console.log("%cWebsite: https://RyzenX.com","font-size:24px;background-color:red;color:white;padding:4px;margin:4px;"),console.log("%cCopyright 2022 Steven Yan. All rights reserved.","font-size:24px;background-color:blue;color:white;padding:4px;margin:4px;"),document.oncopy=addLink;
打赏
  • 版权声明: 本博客采用 Apache License 2.0 许可协议。
    转载请注明出处: https://ryzenx.com/2022/03/Typora-export-html/

谢谢你的喜欢~

支付宝
微信