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. 使用WebApi+Vue3从0到1搭建《权限管理系统》:二、搭建JWT系统鉴权
			
    视频地址:[WebApi+Vue3从0到1搭建<权限管理系统>系列视频:搭建JWT系统鉴权-哔哩哔哩] https://b23.tv/R6cOcDO qq群:801913255 一.在ap ...
    
			
    2. 
						
  2. python实现不同颜色气球隔开摆放，并且提示不能摆放的情况
			
    这个是一位隐秘人物让我做的一道题(如标题),我也分享出来了. 首先是成品展示(暂时没有做成可视化界面的样子): 我做的是把所有的气球录入进来,然后利用基础数据结构(字典,数据等)排序等,由于我是初学, ...
    
			
    3. 
						
  3. few-shot-learning for object detection
			
    github  https://github.com/LiuXinyu12378/few-shot-learning-for-object-detection train.py from __futu ...
    
			
    4. 
						
  4. 【力扣精选】Oracle SQL 176. 第二高的薪水
			
    [力扣精选]Oracle SQL 176. 第二高的薪水 这道题很适合用来作为窗口函数的入门使用练习 链接如下: https://leetcode.cn/problems/second-highest ...
    
			
    5. 
						
  5. 字节面试：如何解决MQ消息积压问题？
			
    MQ(Message Queue)消息积压问题指的是在消息队列中累积了大量未处理的消息,导致消息队列中的消息积压严重,超出系统处理能力,影响系统性能和稳定性的现象. 1.消息积压是哪个环节的问题? M ...
    
			
    6. 
						
  6. 力扣618(MySQL)-学生地理信息报告（困难）
			
    题目: 一所美国大学有来自亚洲.欧洲和美洲的学生,他们的地理信息存放在如下 student 表中 该表没有主键.它可能包含重复的行.该表的每一行表示学生的名字和他们来自的大陆. 一所学校有来自亚洲.欧 ...
    
			
    7. 
						
  7. 力扣429(java)-构造矩形（简单）
			
    题目: 作为一位web开发者, 懂得怎样去规划一个页面的尺寸是很重要的. 所以,现给定一个具体的矩形页面面积,你的任务是设计一个长度为 L 和宽度为 W 且满足以下要求的矩形的页面.要求: 你设计的矩 ...
    
			
    8. 
						
  8. 当 AI 邂逅绘画艺术，能迸发出怎样的火花？
			
    简介: 2021年初,OpenAI 团队发布了能够根据文本描述生成图像的 DALL-E 模型.由于其强大的跨模态图像生成能力,引起自然语言和视觉圈技术爱好者的强烈追捧.仅仅一年多的时间,多模态图像生成 ...
    
			
    9. 
						
  9. 深入浅出eBPF｜你要了解的7个核心问题
			
    简介: 过去一年,ARMS基于eBPF技术打造了Kubernetes监控,提供多语言无侵入的应用性能,系统性能,网络性能观测能力,验证了eBPF技术的有效性.eBPF技术和生态发展很好,未来前景广大, ...
    
			
    10. 
						
  10. 干货｜一文读懂阿里云数据库Autoscaling是如何工作的
			
    简介: 阿里云数据库实现了其特有的Autosaling能力,该能力由数据库内核.管控及DAS(数据库自治服务)团队共同构建,内核及管控团队提供了数据库Autoscaling的基础能力,DAS则负责性能 ...
    
			
    11.