lyreg / stylesheet-for-MarkdownPad-2

a stylesheet for MarkdownPad 2
6 stars 4 forks source link

Suggestion #1

Open CHN-STUDENT opened 6 years ago

CHN-STUDENT commented 6 years ago

I think it is a nice stylesheet for the markdownpad 2,And also i find it may have little defects. And Here are my suggestion:

1.Hope can support the <code><code><pre></pre> I use the highlight.js to support this.

<script type="text/javascript"  src="D:\jaxedit-0.40\library\mathjax\unpacked\MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<script src="D:\highlight.js\highlight.pack.js"></script>
<link href="D:\highlight.js\styles\github.css" rel="stylesheet">
<script>
hljs.initHighlightingOnLoad();
</script>

2.Hope the photos can automatically change this size I add this in the stylesheet.

img{  
    margin-left: auto; 
    margin-right:auto; 
    display:block;
    max-width: 100%;  
    max-height: 100%;     
}  

3.Hope the title can use bigger font-size,it can be more distinct.

This is my personal suggestion,hope you can update and make your project better. Thanks!

demo: tim 20180422002024

CHN-STUDENT commented 6 years ago

By the way,i use the mathjax to show the mathematical formula.And i use html print to pdf to output.

CHN-STUDENT commented 6 years ago

And today i try to use flowchart.js support the flow chart and Chart.js to support chart, but it has many problem.

The flowchar.js can not parse the code on MarkdownPad, and i submitted a issue to ask how to fix it (https://github.com/adrai/flowchart.js/issues/147)

I did this by this header:

<script type="text/javascript"  src="D:\jaxedit-0.40\library\mathjax\unpacked\MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript"  src="D:\jaxedit-0.40\library\mathjax\unpacked\MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><script type="text/javascript"  src="D:\jaxedit-0.40\library\mathjax\unpacked\MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="D:\flowchart.js\raphael.min.js"></script>
<script src="D:\flowchart.js\flowchart.min.js"></script>
<script src="D:\Chart.js\Chart.bundle.min.js"></script>

<script>
     window.onload = function myFunction() {
      var cd = document.querySelector(".lang-flow");
      var code = cd.value || cd.textContent;
      var diagram;
      if (diagram) {
                      diagram.clean();
          }
      diagram= flowchart.parse(code);
      diagram.drawSVG('diagram', {
                      // 'x': 30,
                      // 'y': 50,
                      'line-width': 3,
                      'maxWidth': 3,//ensures the flowcharts fits within a certian width
                      'line-length': 50,
                      'text-margin': 10,
                      'font-size': 14,
                      'font': 'normal',
                      'font-family': 'Helvetica',
                      'font-weight': 'normal',
                      'font-color': 'black',
                      'line-color': 'black',
                      'element-color': 'black',
                      'fill': 'white',
                      'yes-text': 'yes',
                      'no-text': 'no',
                      'arrow-end': 'block',
                      'scale': 1,
                      'symbols': {
                        'start': {
                          'font-color': 'red',
                          'element-color': 'green',
                          'fill': 'yellow'
                        },
                        'end':{
                          'class': 'end-element'
                        }
                      },
                      'flowstate' : {
                        'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                        'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
                        'future' : { 'fill' : '#FFFF99'},
                        'request' : { 'fill' : 'blue'},
                        'invalid': {'fill' : '#444444'},
                        'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
                        'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
                      }
                    });
        var del = cd.parentElement;
        var parent = del.parentElement;
        parent.removeChild(del);
 }
</script>

<script src="D:\highlight.js\highlight.pack.js"></script>
<link href="D:\highlight.js\styles\github.css" rel="stylesheet">
<script>
hljs.initHighlightingOnLoad();
</script>

The Chart.js can work,but it can not output well to A4. I am not good at Front-end development, so i hope someone can help me.Also, i am trying to find ways to solve them.

Thanks!

tim 20180427134841