Typora 导出html图片转base64

  1. Typora 中图片使用绝对路径
  2. 图片路径不要使用中文，否则可能会不成功
  3. 打包 jar ，jar放在到出 html 同级目录下
  4. 必须要有 jdk 环境

一、实现代码

 
 
 
xxxxxxxxxx
 
 
 
 
import java.io.*;
import java.util.Base64;


public class Main {


    /**


     * @param src img src 内容


     * @param end 下次查找字符串起始位置


     * @return java.lang.String


     * @throws


     * @description 递归执行查找同一行字符串多个 img 标签


     * @date 2021/10/1 11:07


     * @Author Mr.Fang


     */


    public static String execute(String src, int end) {


        String result = matchImg(src, end);


        System.out.println("文件路径：-----" + result);


        if (result.isEmpty()) {


            return src;


        } else {


            String[] split = result.split(",");


            String s1 = fileToBase64(split[0]);


            if (s1.isEmpty()) {


                return src;


            } else {


                String replace = src.replace(split[0], s1);


                return execute(replace, Integer.valueOf(split[1]) + 20);


            }


        }


    }




    /**


     * @param str 原始字符串


     * @return java.lang.String


     * @Description 匹配 img src 内容


     * @date 2021/9/30 0030 16:32


     * @auther Mr.Fang


     **/


    public static String matchImg(String str, int start) {


        int img = str.indexOf("<img", start); // 起始位置


        if (img == -1) {


            return "";


        }


        int l = str.indexOf("\"", img) + 1; // src 左侧 双引号


        int r = str.indexOf("\"", l); // src 右侧 双引号


        String substring = str.substring(l, r);


        if (substring.startsWith("data")) { // 跳过已经 base64 编码的文件 和 http 地址


            return matchImg(str, r);


        }


        return substring + "," + r; // src 地址 返回 src 内容以及最后的位置 使用逗号拼接


    }




    /**


     * @param path 文件路径


     * @return java.lang.String


     * @Description 文件转 base64


     * @date 2021/9/30 0030 16:37


     * @auther Mr.Fang


     **/


    public static String fileToBase64(String path) {


        File file = new File(path);


        if (!file.exists()) {


            System.err.printf("文件不存在");


            return "";


        }


        byte bytes[] = null;


        try (FileInputStream fileInputStream = new FileInputStream(path);) {


            bytes = new byte[fileInputStream.available()];


            fileInputStream.read(bytes);


        } catch (Exception e) {


            e.printStackTrace();


            System.err.println("图片转 base64 失败");


        }


        // 文件后缀处理


        String suffix = getSuffix(path);


        return "data:image/" + suffix + ";base64," + Base64.getEncoder().encodeToString(bytes);


    }




    /**


     * @param str


     * @return java.lang.String


     * @throws


     * @description 获取文件后缀


     * @date 2021/10/1 16:43


     * @Author Mr.Fang


     */


    public static String getSuffix(String str) {


        return str.substring(str.lastIndexOf(".") + 1);


    }






    // 主方法


    public static void main(String[] args) {


        // 获取文件路径


        if (args.length == 0) {


            System.out.println("No parameters passed");


            return;


        }


        String arg = args[0];


        // 获取文件后缀


        String suffix = getSuffix(arg);


        try (BufferedReader bfr = new BufferedReader(new FileReader(arg));


             BufferedWriter bfw = new BufferedWriter(new FileWriter(arg.concat("-bast64.").concat(suffix)))


        ) {


            String len = "";


            while ((len = bfr.readLine()) != null) {


                String result = "";


                if (len.indexOf("<img") != -1) {


                    result = execute(len, 0);


                }


                if (result.equals("")) {


                    bfw.write(len);


                } else {


                    bfw.write(result);


                }


            }




        } catch (Exception e) {


            e.printStackTrace();


            System.out.println("error");


        }


        System.out.println("success");




    }


}














 


 






二、打包 jar
























三、cmd 执行 jar


  1. 到出需要本地图片转base64 的 html 文件
    2. 

  2. typora-img.jar 放到 文件同级目录下
    3. 

  3. 执行命令 java -jar typora-img.jar 加文件绝对路径 E:\makerdown\测试图片转换PDF.html




 


 


 














xxxxxxxxxx




 


 






 


 


java -jar typora-img.jar E:\makerdown\测试图片转换PDF.html














 


 








四、转换后结果




五、typora 配置


  1. typora提供导出后执行自定义命令
    2. 

  2. 左上角 文件->偏好设置->导出->html->导出后运行自定义命令




 


 


 














x




 


 






 


 


java -jar typora-img.jar "${outputPath}"














 


 








六、其他参数


更多参数信息查看官网 https://support.typora.io/Export/


您可以在自定义页眉/页脚文本和自定义导出命令中使用 ${variables}，它们的值是：






Key
Value






${outputPath}
Output file path after export. For example, if you export to location /User/aaa/Documents/test.pdf, then ${outputPath} will be replaced to that path.




${outputFileName}
File name (without extension) of the saved exported file. It will be test in above case.




${outputFileFullName}
File name (with extension) of the saved exported file. It will be test.md in above case.




${currentPath}
Path of currently edited file. For example, if you are editing /User/aaa/Document/readme.md, then the value will be /User/aaa/Document/readme.md.




${currentFileName}
Filename without extension of currently edited file. It will be readme in above case.




${currentFileFullName}
Filename with extension of currently edited file. It will be readme.md in above case.




${today}
Current date, for example: 2020-01-19




${pageNo}
Current page number. Only available for PDF format.




${pageCount} / ${totalPages}
Total page counts. Only available for PDF format.




${title}
Article title, should be defined in YAML Front Matter.




${author}
Article author, defined in export options for PDF format, can be overwritten in YAML Front Matter.




${a.b}
If a is an object defined in YAML Front Matter which contains b, then you can use a.b to access value for b.




Other variables
You can use keyword: value in YAML Front Matter, then uses ${keyword} variables in export configs.






其他


typora 官网 https://www.typora.io/


jar下载地址 https://864000.lanzoui.com/iRX5suqya6b






html { overflow-x: initial !important }

:root { --bg-color: #ffffff; --text-color: #333333; --select-text-bg-color: #B5D6FC; --select-text-font-color: auto; --monospace: "Lucida Console",Consolas,"Courier",monospace; --title-bar-height: 20px }

.mac-os-11 { --title-bar-height: 28px }

html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased }

body { margin: 0; padding: 0; height: auto; inset: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; tab-size: 4 }

iframe { margin: auto }

a.url { word-break: break-all }

a:active, a:hover { outline: 0 }

.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color) }

#write { margin: 0 auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 36px }

#write.first-line-indent p { text-indent: 2em }

#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0 }

#write.first-line-indent li { margin-left: 2em }

.for-image #write { padding-left: 8px; padding-right: 8px }

body.typora-export { padding-left: 30px; padding-right: 30px }

.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap }

.typora-export .task-list-item input { pointer-events: none }

@media screen and (max-width: 500px) { body.typora-export { padding-left: 0; padding-right: 0 } #write { padding-left: 20px; padding-right: 20px } .CodeMirror-sizer { margin-left: 0 !important } .CodeMirror-gutters { display: none !important } }

#write li>figure:last-child { margin-bottom: 0.5rem }

#write ol, #write ul { position: relative }

img { max-width: 100%; vertical-align: middle; image-orientation: from-image }

button, input, select, textarea { color: inherit }

input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0 }

*, ::after, ::before { box-sizing: border-box }

#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit }

#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative }

p { line-height: inherit }

h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 4 }

p { orphans: 4 }

h1 { font-size: 2rem }

h2 { font-size: 1.8rem }

h3 { font-size: 1.6rem }

h4 { font-size: 1.4rem }

h5 { font-size: 1.2rem }

h6 { font-size: 1rem }

.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem }

.hidden { display: none }

.md-blockmeta { color: rgba(204, 204, 204, 1); font-weight: 700; font-style: italic }

a { cursor: pointer }

sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgba(85, 85, 85, 1); border-radius: 4px; cursor: pointer }

sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit }

#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit }

figure { overflow-x: auto; margin: 1.2em 0; max-width: calc(100% + 16px); padding: 0 }

figure>table { margin: 0 }

tr { break-inside: avoid; break-after: auto }

thead { display: table-header-group }

table { border-collapse: collapse; border-spacing: 0; width: 100%; overflow: auto; break-inside: auto; text-align: left }

table.md-table td { min-width: 32px }

.CodeMirror-gutters { border-right: 0; background-color: inherit }

.CodeMirror-linenumber { user-select: none }

.CodeMirror { text-align: left }

.CodeMirror-placeholder { opacity: 0.3 }

.CodeMirror pre { padding: 0 4px }

.CodeMirror-lines { padding: 0 }

div.hr:focus { cursor: none }

#write pre { white-space: pre-wrap }

#write.fences-no-line-wrapping pre { white-space: pre }

#write pre.ty-contain-cm { white-space: normal }

.CodeMirror-gutters { margin-right: 4px }

.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; position: relative !important }

.md-fences-adv-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0; padding-bottom: 8px; overflow-x: auto }

#write .md-fences.mock-cm { white-space: pre-wrap }

.md-fences.md-fences-with-lineno { padding-left: 0 }

#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto }

.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px }

.CodeMirror-line, twitterwidget { break-inside: avoid }

.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em }

.footnotes+.footnotes { margin-top: 0 }

.md-reset { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; background: left top; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr }

li div { padding-top: 0 }

blockquote { margin: 1rem 0 }

li .mathjax-block, li p { margin: 0.5rem 0 }

li blockquote { margin: 1rem 0 }

li { margin: 0; position: relative }

blockquote>:last-child { margin-bottom: 0 }

blockquote>:first-child, li>:first-child { margin-top: 0 }

.footnotes-area { color: rgba(136, 136, 136, 1); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal }

#write .footnote-line { white-space: pre-wrap }

@media print { body, html { border: 1px solid rgba(0, 0, 0, 0); height: 99%; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures } #write { margin-top: 0; padding-top: 0; border-color: rgba(0, 0, 0, 0) !important } .typora-export * { -webkit-print-color-adjust: exact } .typora-export #write { break-after: avoid } .typora-export #write::after { height: 0 } .is-mac table { break-inside: avoid } .typora-export-show-outline .typora-export-sidebar { display: none } }

.footnote-line { margin-top: 0.714em; font-size: 0.7em }

a img, img a { cursor: pointer }

pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgba(204, 204, 204, 1); display: block; overflow-x: hidden }

p>.md-image:only-child:not(.md-img-error) img, p>img:only-child { display: block; margin: auto }

#write.first-line-indent p>.md-image:only-child:not(.md-img-error) img { left: -2em; position: relative }

p>.md-image:only-child { display: inline-block; width: 100% }

#write .MathJax_Display { margin: 0.8em 0 0 }

.md-math-block { width: 100% }

.md-math-block:not(:empty)::after { display: none }

.MathJax_ref { fill: currentColor }

[contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { outline: 0; box-shadow: none }

.md-task-list-item { position: relative; list-style-type: none }

.task-list-item.md-task-list-item { padding-left: 0 }

.md-task-list-item>input { position: absolute; top: 0; left: 0; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none }

.math { font-size: 1rem }

.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px }

.md-toc-content { position: relative; margin-left: 0 }

.md-toc-content::after, .md-toc::after { display: none }

.md-toc-item { display: block; color: rgba(65, 131, 196, 1) }

.md-toc-item a { text-decoration: none }

.md-toc-inner:hover { text-decoration: underline }

.md-toc-inner { display: inline-block; cursor: pointer }

.md-toc-h1 .md-toc-inner { margin-left: 0; font-weight: 700 }

.md-toc-h2 .md-toc-inner { margin-left: 2em }

.md-toc-h3 .md-toc-inner { margin-left: 4em }

.md-toc-h4 .md-toc-inner { margin-left: 6em }

.md-toc-h5 .md-toc-inner { margin-left: 8em }

.md-toc-h6 .md-toc-inner { margin-left: 10em }

@media screen and (max-width: 48em) { .md-toc-h3 .md-toc-inner { margin-left: 3.5em } .md-toc-h4 .md-toc-inner { margin-left: 5em } .md-toc-h5 .md-toc-inner { margin-left: 6.5em } .md-toc-h6 .md-toc-inner { margin-left: 8em } }

a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit }

.footnote-line a:not(.reversefootnote) { color: inherit }

.md-attr { display: none }

.md-fn-count::after { content: "." }

code, pre, samp, tt { font-family: var(--monospace) }

kbd { margin: 0 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgba(36, 39, 41, 1); background: rgba(255, 255, 255, 1); border: 1px solid rgba(173, 179, 185, 1); border-radius: 3px; box-shadow: 0 1px rgba(12, 13, 14, 0.2), inset 0 0 2px rgba(255, 255, 255, 1); white-space: nowrap; vertical-align: middle }

.md-comment { color: rgba(162, 127, 3, 1); opacity: 0.8; font-family: var(--monospace) }

code { text-align: left; vertical-align: initial }

a.md-print-anchor { white-space: pre !important; border-style: none !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0 !important; outline: 0 !important; background: left top !important; text-decoration: initial !important; text-shadow: initial !important }

.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif }

.md-diagram-panel>svg { max-width: 100% }

[lang="flow"] svg, [lang="mermaid"] svg { max-width: 100%; height: auto }

[lang="mermaid"] .node text { font-size: 1rem }

table tr th { border-bottom: 0 }

video { max-width: 100%; display: block; margin: 0 auto }

iframe { max-width: 100%; width: 100%; border: none }

.highlight td, .highlight tr { border: 0 }

mark { background: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1) }

.md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit }

.md-expand mark .md-meta { opacity: 0.3 !important }

mark .md-meta { color: rgba(0, 0, 0, 1) }

@media print { .typora-export h1, .typora-export h2, .typora-export h3, .typora-export h4, .typora-export h5, .typora-export h6 { break-inside: avoid } }

.md-diagram-panel .messageText { stroke: none !important }

.md-diagram-panel .start-state { fill: var(--node-fill) }

.md-diagram-panel .edgeLabel rect { opacity: 1 !important }

.md-require-zoom-fix { height: auto; margin-top: 16px; margin-bottom: 16px }

.md-require-zoom-fix foreignobject { font-size: var(--mermaid-font-zoom) }

.md-fences.md-fences-math { font-size: 1em }

.md-fences-advanced:not(.md-focus) { padding: 0; white-space: nowrap; border: 0 }

.md-fences-advanced:not(.md-focus) { }

.typora-export-show-outline .typora-export-content { max-width: 1440px; margin: auto; display: flex; flex-direction: row }

.typora-export-sidebar { width: 300px; font-size: 0.8rem; margin-top: 80px; margin-right: 18px }

.typora-export-show-outline #write { --webkit-flex: 2; flex: 2 1 0 }

.typora-export-sidebar .outline-content { position: fixed; top: 0; max-height: 100%; padding-bottom: 30px; padding-top: 60px; width: 300px }

@media screen and (max-width: 1024px) { .typora-export-sidebar, .typora-export-sidebar .outline-content { width: 240px } }

@media screen and (max-width: 800px) { .typora-export-sidebar { display: none } }

.outline-content li, .outline-content ul { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; list-style: none }

.outline-content ul { margin-top: 0; margin-bottom: 0 }

.outline-content strong { font-weight: 400 }

.outline-expander { width: 1rem; height: 1.42857rem; position: relative; display: table-cell; vertical-align: middle; cursor: pointer; padding-left: 4px }

.outline-expander::before { content: ""; position: relative; font-family: Ionicons; display: inline-block; font-size: 8px; vertical-align: middle }

.outline-item { padding-top: 3px; padding-bottom: 3px; cursor: pointer }

.outline-expander:hover::before { content: "" }

.outline-h1>.outline-item { padding-left: 0 }

.outline-h2>.outline-item { padding-left: 1em }

.outline-h3>.outline-item { padding-left: 2em }

.outline-h4>.outline-item { padding-left: 3em }

.outline-h5>.outline-item { padding-left: 4em }

.outline-h6>.outline-item { padding-left: 5em }

.outline-label { cursor: pointer; display: table-cell; vertical-align: middle; text-decoration: none; color: inherit }

.outline-label:hover { text-decoration: underline }

.outline-item:hover { border-color: rgba(245, 245, 245, 1); background-color: var(--item-hover-bg-color) }

.outline-item:hover { margin-left: -28px; margin-right: -28px; border-left: 28px solid rgba(0, 0, 0, 0); border-right: 28px solid rgba(0, 0, 0, 0) }

.outline-item-single .outline-expander::before, .outline-item-single .outline-expander:hover::before { display: none }

.outline-item-open>.outline-item>.outline-expander::before { content: "" }

.outline-children { display: none }

.info-panel-tab-wrapper { display: none }

.outline-item-open>.outline-children { display: block }

.typora-export .outline-item { padding-top: 1px; padding-bottom: 1px }

.typora-export .outline-item:hover { margin-right: -8px; border-right: 8px solid rgba(0, 0, 0, 0) }

.typora-export .outline-expander::before { content: "+"; font-family: inherit; top: -1px }

.typora-export .outline-expander:hover::before, .typora-export .outline-item-open>.outline-item>.outline-expander::before { content: "−" }

.typora-export-collapse-outline .outline-children { display: none }

.typora-export-collapse-outline .outline-item-open>.outline-children, .typora-export-no-collapse-outline .outline-children { display: block }

.typora-export-no-collapse-outline .outline-expander::before { content: "" !important }

.typora-export-show-outline .outline-item-active>.outline-item .outline-label { font-weight: 700 }

.md-inline-math-container mjx-container { zoom: 0.95 }

.CodeMirror { height: auto }

.CodeMirror.cm-s-inner { }

.CodeMirror-scroll { z-index: 3 }

.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgba(255, 255, 255, 1) }

.CodeMirror-gutters { border-right: 1px solid rgba(221, 221, 221, 1); white-space: nowrap }

.CodeMirror-linenumber { padding: 0 3px 0 5px; text-align: right; color: rgba(153, 153, 153, 1) }

.cm-s-inner .cm-keyword { color: rgba(119, 0, 136, 1) }

.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgba(34, 17, 153, 1) }

.cm-s-inner .cm-number { color: rgba(17, 102, 68, 1) }

.cm-s-inner .cm-def { color: rgba(0, 0, 255, 1) }

.cm-s-inner .cm-variable { color: rgba(0, 0, 0, 1) }

.cm-s-inner .cm-variable-2 { color: rgba(0, 85, 170, 1) }

.cm-s-inner .cm-variable-3 { color: rgba(0, 136, 85, 1) }

.cm-s-inner .cm-string { color: rgba(170, 17, 17, 1) }

.cm-s-inner .cm-property { color: rgba(0, 0, 0, 1) }

.cm-s-inner .cm-operator { color: rgba(152, 26, 26, 1) }

.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgba(170, 85, 0, 1) }

.cm-s-inner .cm-string-2 { color: rgba(255, 85, 0, 1) }

.cm-s-inner .cm-meta { color: rgba(85, 85, 85, 1) }

.cm-s-inner .cm-qualifier { color: rgba(85, 85, 85, 1) }

.cm-s-inner .cm-builtin { color: rgba(51, 0, 170, 1) }

.cm-s-inner .cm-bracket { color: rgba(153, 153, 119, 1) }

.cm-s-inner .cm-tag { color: rgba(17, 119, 0, 1) }

.cm-s-inner .cm-attribute { color: rgba(0, 0, 204, 1) }

.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgba(0, 0, 255, 1) }

.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgba(0, 153, 0, 1) }

.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgba(153, 153, 153, 1) }

.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgba(0, 0, 204, 1) }

.cm-negative { color: rgba(221, 68, 68, 1) }

.cm-positive { color: rgba(34, 153, 34, 1) }

.cm-header, .cm-strong { font-weight: 700 }

.cm-del { text-decoration: line-through }

.cm-em { font-style: italic }

.cm-link { text-decoration: underline }

.cm-error { color: rgba(255, 0, 0, 1) }

.cm-invalidchar { color: rgba(255, 0, 0, 1) }

.cm-constant { color: rgba(38, 139, 210, 1) }

.cm-defined { color: rgba(181, 137, 0, 1) }

div.CodeMirror span.CodeMirror-matchingbracket { color: rgba(0, 255, 0, 1) }

div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgba(255, 34, 34, 1) }

.cm-s-inner .CodeMirror-activeline-background { }

.CodeMirror { position: relative; overflow: hidden }

.CodeMirror-scroll { height: 100%; outline: 0; position: relative; box-sizing: content-box }

.CodeMirror-sizer { position: relative }

.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; outline: 0 }

.CodeMirror-vscrollbar { right: 0; top: 0; overflow: hidden }

.CodeMirror-hscrollbar { bottom: 0; left: 0 }

.CodeMirror-scrollbar-filler { right: 0; bottom: 0 }

.CodeMirror-gutter-filler { left: 0; bottom: 0 }

.CodeMirror-gutters { position: absolute; left: 0; top: 0; padding-bottom: 10px; z-index: 3; overflow-y: hidden }

.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block }

.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: left top !important; border: none !important }

.CodeMirror-gutter-background { position: absolute; top: 0; bottom: 0; z-index: 4 }

.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4 }

.CodeMirror-lines { cursor: text }

.CodeMirror pre { border-radius: 0; border-width: 0; background: left top; font-family: inherit; font-size: inherit; margin: 0; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible }

.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal }

.CodeMirror-code pre { border-right: 30px solid rgba(0, 0, 0, 0); width: fit-content }

.CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto }

.CodeMirror-linebackground { position: absolute; inset: 0px; z-index: 0 }

.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto }

.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden }

.CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden }

.CodeMirror-measure pre { position: static }

.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0 }

.CodeMirror div.CodeMirror-cursor { visibility: hidden }

.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit }

.cm-searching { background: rgba(255, 255, 0, 0.4) }

span.cm-underlined { text-decoration: underline }

span.cm-strikethrough { text-decoration: line-through }

.cm-tw-syntaxerror { color: rgba(255, 255, 255, 1); background-color: rgba(153, 0, 0, 1) }

.cm-tw-deleted { text-decoration: line-through }

.cm-tw-header5 { font-weight: 700 }

.cm-tw-listitem:first-child { padding-left: 10px }

.cm-tw-box { border-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-width: 0 !important }

.cm-tw-underline { text-decoration: underline }

@media print { .CodeMirror div.CodeMirror-cursor { visibility: hidden } }

#write { max-width: 860px; font-size: 16px; color: rgba(0, 0, 0, 1); padding: 0 10px; line-height: 1.6; word-spacing: 0; letter-spacing: 0; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif }

#write p { font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgba(0, 0, 0, 1) }

#write h1, #write h2, #write h3, #write h4, #write h5, #write h6 { margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1) }

#write h1 { font-size: 1.5rem }

#write h2 { font-size: 1.3rem; border-bottom: 2px solid rgba(239, 112, 96, 1) }

#write h2 span { display: inline-block; font-weight: bold; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px }

#write h2:after { display: inline-block; content: ""; vertical-align: bottom; border-bottom: 36px solid rgba(239, 235, 233, 1); border-right: 20px solid rgba(0, 0, 0, 0) }

#write h3 { font-size: 1.2rem }

#write h4 { font-size: 1.1rem }

#write h5 { font-size: 1rem }

#write h6 { font-size: 1rem }

#write ul, #write ol { margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1) }

#write ul { list-style-type: disc }

#write ul ul { list-style-type: square }

#write ol { list-style-type: decimal }

#write li section { margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-weight: 500 }

#write blockquote { display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(239, 112, 96, 1); color: rgba(106, 115, 125, 1); padding: 10px 10px 10px 20px; margin-bottom: 20px; margin-top: 20px; background: rgba(255, 249, 249, 1) }

#write blockquote p { margin: 0; color: rgba(0, 0, 0, 1); line-height: 26px }

#write a { text-decoration: none; word-wrap: break-word; font-weight: bold; border-bottom: 1px solid rgba(239, 112, 96, 1); color: rgba(239, 112, 96, 1) }

#write p code, #write li code { font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(239, 112, 96, 1); background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all }

#write img { display: block; margin: 0 auto; max-width: 100% }

#write span img { display: inline-block; border-right: 0; border-left: 0 }

#write table { display: table; text-align: left }

#write tbody { border: 0 }

#write table tr { border-top: 1px solid rgba(204, 204, 204, 1); border-right: 0; border-bottom: 0; border-left: 0; background-color: rgba(255, 255, 255, 1) }

#write table tr:nth-child(2n) { background-color: rgba(248, 248, 248, 1) }

#write table tr th, #write table tr td { font-size: 16px; border: 1px solid rgba(204, 204, 204, 1); padding: 5px 10px; text-align: left }

#write table tr th { font-weight: bold; background-color: rgba(240, 240, 240, 1) }

#write span code, #write li code { color: rgba(239, 112, 96, 1) }

#write .md-footnote { font-weight: bold; color: rgba(239, 112, 96, 1) }

#write .md-footnote>.md-text:before { content: "[" }

#write .md-footnote>.md-text:after { content: "]" }

#write .md-def-name { padding-right: 1.8ch }

#write .md-def-name:before { content: "["; color: rgba(0, 0, 0, 1) }

#write .md-def-name:after { color: rgba(0, 0, 0, 1) }

.md-fences:before { content: " "; display: block; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: rgba(40, 44, 52, 1); margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px }

.cm-s-inner.CodeMirror { padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: rgba(41, 45, 62, 1); color: rgba(166, 172, 205, 1); font-family: Consolas; border-radius: 4px }

.CodeMirror-lines { padding-left: 4px }

.cm-s-inner .cm-keyword { color: rgba(199, 146, 234, 1) !important }

.cm-s-inner .cm-operator { color: rgba(137, 221, 255, 1) !important }

.cm-s-inner .cm-variable-2 { color: rgba(238, 255, 255, 1) !important }

.cm-s-inner .cm-variable-3, .cm-s-inner .cm-type { color: rgba(240, 113, 120, 1) !important }

.cm-s-inner .cm-builtin { color: rgba(255, 203, 107, 1) !important }

.cm-s-inner .cm-atom { color: rgba(247, 140, 108, 1) !important }

.cm-s-inner .cm-number { color: rgba(255, 83, 112, 1) !important }

.cm-s-inner .cm-def { color: rgba(130, 170, 255, 1) !important }

.cm-s-inner .cm-string { color: rgba(195, 232, 141, 1) !important }

.cm-s-inner .cm-string-2 { color: rgba(240, 113, 120, 1) !important }

.cm-s-inner .cm-comment { color: rgba(103, 110, 149, 1) !important }

.cm-s-inner .cm-variable { color: rgba(240, 113, 120, 1) !important }

.cm-s-inner .cm-tag { color: rgba(255, 83, 112, 1) !important }

.cm-s-inner .cm-meta { color: rgba(255, 203, 107, 1) !important }

.cm-s-inner .cm-attribute { color: rgba(199, 146, 234, 1) !important }

.cm-s-inner .cm-property { color: rgba(199, 146, 234, 1) !important }

.cm-s-inner .cm-qualifier { color: rgba(222, 203, 107, 1) !important }

.cm-s-inner .cm-variable-3, .cm-s-inner .cm-type { color: rgba(222, 203, 107, 1) !important }

.cm-s-inner .cm-error { color: rgba(255, 255, 255, 1) !important; background-color: rgba(255, 83, 112, 1) !important }

.cm-s-inner .CodeMirror-matchingbracket { text-decoration: underline; color: rgba(255, 255, 255, 1) !important }

.CodeMirror div.CodeMirror-cursor { border-left: 1px solid rgba(239, 112, 96, 1); z-index: 3 }

.cm-s-inner div.CodeMirror-selected { background: rgba(167, 178, 189, 0.2) !important }

.cm-s-inner.CodeMirror-focused div.CodeMirror-selected { background: rgba(167, 178, 189, 0.2) !important }

.cm-s-inner .CodeMirror-selected, .cm-s-inner .CodeMirror-selectedtext { background-color: rgba(167, 178, 189, 0) !important }

.cm-s-inner .CodeMirror-line::-moz-selection,.cm-s-inner .CodeMirror-line > span::-moz-selection,.cm-s-inner .CodeMirror-line > span > span::-moz-selection { background-color: rgba(167, 178, 189, 0.2) }

.cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line>span::selection, .cm-s-inner .CodeMirror-line>span>span::selection { background-color: rgba(167, 178, 189, 0.2) }

mjx-container[jax="SVG"] { direction: ltr }

mjx-container[jax="SVG"]>svg { overflow: visible; min-height: 1px; min-width: 1px }

mjx-container[jax="SVG"]>svg a { fill: rgba(0, 0, 255, 1); stroke: rgba(0, 0, 255, 1) }

mjx-assistive-mml { position: absolute !important; top: 0; left: 0; clip: rect(1px, 1px, 1px, 1px); padding: 1px 0 0 !important; border: 0 !important; display: block !important; width: auto !important; overflow: hidden !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }

mjx-assistive-mml[display="block"] { width: 100% !important }

mjx-container[jax="SVG"][display="true"] { display: block; text-align: center; margin: 1em 0 }

mjx-container[jax="SVG"][display="true"][width="full"] { display: flex }

mjx-container[jax="SVG"][justify="left"] { text-align: left }

mjx-container[jax="SVG"][justify="right"] { text-align: right }

g[data-mml-node="merror"]>g { fill: rgba(255, 0, 0, 1); stroke: rgba(255, 0, 0, 1) }

g[data-mml-node="merror"]>rect[data-background] { fill: rgba(255, 255, 0, 1); stroke: none }

g[data-mml-node="mtable"]>line[data-line], svg[data-table]>g>line[data-line] { stroke-width: 70px; fill: none }

g[data-mml-node="mtable"]>rect[data-frame], svg[data-table]>g>rect[data-frame] { stroke-width: 70px; fill: none }

g[data-mml-node="mtable"]>.mjx-dashed, svg[data-table]>g>.mjx-dashed { stroke-dasharray: 140 }

g[data-mml-node="mtable"]>.mjx-dotted, svg[data-table]>g>.mjx-dotted { stroke-linecap: round }

g[data-mml-node="mtable"]>g>svg { overflow: visible }

[jax="SVG"] mjx-tool { display: inline-block; position: relative; width: 0; height: 0 }

[jax="SVG"] mjx-tool>mjx-tip { position: absolute; top: 0; left: 0 }

mjx-tool>mjx-tip { display: inline-block; padding: 0.2em; border: 1px solid rgba(136, 136, 136, 1); font-size: 70%; background-color: rgba(248, 248, 248, 1); color: rgba(0, 0, 0, 1); box-shadow: 2px 2px 5px rgba(170, 170, 170, 1) }

g[data-mml-node="maction"][data-toggle] { cursor: pointer }

mjx-status { display: block; position: fixed; left: 1em; bottom: 1em; min-width: 25%; padding: 0.2em 0.4em; border: 1px solid rgba(136, 136, 136, 1); font-size: 90%; background-color: rgba(248, 248, 248, 1); color: rgba(0, 0, 0, 1) }

foreignObject[data-mjx-xml] { font-family: initial; line-height: normal; overflow: visible }

mjx-container[jax="SVG"] path[data-c], mjx-container[jax="SVG"] use[data-c] { stroke-width: 3 }

g[data-mml-node="xypic"] path { stroke-width: inherit }

.MathJax g[data-mml-node="xypic"] path { stroke-width: inherit }


 


 


 
												


											
Typora导出html图片转base64的更多相关文章
	

    
						
  1. freemarker导出带图片的word文档
		
    最近做一个关于文档导出功能, 顺便学习了下freemarker,做了个关于导出带图片的word文档,模板并没有写全,只是验证代码的正确性 这只是做一个小功能,故只做了后台代码关于导出的代码,并未与前台 ...
    
		
    2. 
						
  2. Typora配置双击图片放大功能
		
    在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...
    
		
    3. 
						
  3. ppt 制作海报 导出高分辨率图片
		
    用ppt做海报,导出图片的时候,发现导出的图片的分辨率只有96ppi,清晰度不太好. 怎么能这样呢! 网上搜了一下,发现微软提供了一个修改注册表的方法,点击这里访问.不过那里讲的最新只有2010,我的 ...
    
		
    4. 
						
  4. .net C# 图片转Base64   Base64转图片
		
    //图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...
    
		
    5. 
						
  5. html5 图片转为base64格式异步上传
		
    因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...
    
		
    6. 
						
  6. HighChats报表使用C#mvc导出本地图片
		
    最近工作使用了HighCharts,要用到保存成图片功能,但是是内部使用,不允许连接外网,于是就学习了下highcharts生成本地图片. highcharts有一个exporting.js来负责导出 ...
    
		
    7. 
						
  7. 本地与在线图片转Base64及图片预览
		
    查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src  ...
    
		
    8. 
						
  8. JAVA将Excel中的报表导出为图片格式（一）问题背景
		
    如题所示,先抛出一个问题,如何使用JAVA将Excel中的报表导出为图片格式? 首先说一下这个问题的背景,也就是为什么博主会碰到这个问题 随着微信,易信之流大行其道,企业内部的办公交流.绩效考评甚至考 ...
    
		
    9. 
						
  9. OpenXml Excel数据导入导出(含图片的导入导出)
		
    声明:里面的很多东西是基于前人的基础上实现的,具体是哪些人 俺忘了,我做了一些整合和加工 这个项目居于openxml做Excel的导入导出,可以用OpenXml读取Excel中的图片 和OpenXml ...
    
		
    10. 
						
  10. vtk 导出结果图片
		
    项目中需要将渲染结果导出为图片. (1)  一开始搜了vtk的方法,发现: http://blog.csdn.net/lbluekey/article/details/3346312 http://w ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 高并发报错too many clients already或无法创建线程
			
    高并发报错 too many clients already 或无法创建线程 本文出处:https://www.modb.pro/db/432236 问题现象 高并发执行 SQL,报错"so ...
    
			
    2. 
						
  2. git worktree与分支依赖隔离
			
    git worktree介绍 git worktree 是 Git 命令,用于管理多分支工作区. 使用场景: 同时维护不同分支,隔离分支依赖差异:从原有项目开辟一个分支作为另一个新项目,当两个项目依赖 ...
    
			
    3. 
						
  3. mysql 必知必会整理—安全管理[十七]
			
    前言 简单介绍一下安全管理. 正文 MySQL服务器的安全基础是:用户应该对他们需要的数据具有适当的访问权,既不能多也不能少. 换句话说,用户不能对过多的数据具有过多的访问权. 多数用户只需要对表进行 ...
    
			
    4. 
						
  4. This version of Android Studio cannot open this project, please retry with Android Studio 4.0 or newer.
			
    前言 遇到的问题,This version of Android Studio cannot open this project, please retry with Android Studio 4 ...
    
			
    5. 
						
  5. Node中的EventEmitter? 如何实现一个EventEmitter?
			
    一.是什么 我们了解到,Node采用了事件驱动机制,而EventEmitter就是Node实现事件驱动的基础 在EventEmitter的基础上,Node几乎所有的模块都继承了这个类,这些模块拥有了自 ...
    
			
    6. 
						
  6. IOT设备连接上云
			
    如何让我的设备连接上云?参考如下路径. 云 [![](http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/974556/1 ...
    
			
    7. 
						
  7. 如何使用 Serverless Devs 部署静态网站到函数计算（上）
			
    简介:部署个静态网站到函数计算~ ​ 前言 公司经常有一些网站需要发布上线,对比了几款不同的产品后,决定使用阿里云的函数计算(FC)来托管构建出来的静态网站. FC 弹性实例自带的500 Mb 存储空 ...
    
			
    8. 
						
  8. 淘宝推荐、视频搜索背后的检索技术竟是它！深度揭秘达摩院向量检索引擎Proxima
			
    简介: 淘宝搜索推荐.视频搜索的背后使用了什么样的检索技术?非结构化数据检索,向量检索,以及多模态检索,它们到底解决了什么问题?今天由阿里巴巴达摩院的科学家从业务问题出发,抽丝剥茧,深度揭秘达摩院内部 ...
    
			
    9. 
						
  9. Yurt-Tunnel 详解｜如何解决 K8s 在云边协同下的运维监控挑战
			
    简介: 伴随着 5G.IoT 等技术的快速发展,边缘计算被越来越广泛地应用于电信.媒体.运输.物流.农业.零售等行业和场景中,成为解决这些领域数据传输效率的关键方式.与此同时,边缘计算形态.规模.复杂 ...
    
			
    10. 
						
  10. 长文解析：作为容器底层技术的半壁江山， cgroup如何突破并发创建瓶颈？
			
    ​简介: io_uring 作为一种新型高性能异步编程框架,代表着 Linux 内核未来的方向,当前仍处于快速发展中.阿里云联合 InfoQ 发起<io_uring 介绍及应用实践>的技术 ...
    
			
    11.