Merge pull request #282 from Mathpix/dev/olga/fix-padding-for-code-bl…

…ock-in-vscode-mathpix-markdown

PR into master from dev/olga/fix-padding-for-code-block-in-vscode-mathpix-markdown

lib/styles/styles-code.d.ts

@@ -1 +1 @@
-export declare const codeStyles = "\n    #preview-content code, #setText code {\n      font-family: Inconsolata;\n      font-size: inherit;\n      display: initial;\n      background: #f8f8fa;\n    }\n    #preview-content .mmd-highlight code, #setText .mmd-highlight code, \n    #preview-content pre.mmd-highlight code, #setText pre.mmd-highlight code {\n      background-color: transparent;\n    }\n    #preview-content pre code, #setText pre code {\n      font-family: 'DM Mono', Inconsolata, monospace;\n      display: block;\n      color: #333;\n      overflow-x: auto;\n      font-size: 15px;\n      line-height: 24px;\n    }\n\n    .hljs-comment,\n    .hljs-quote {\n      color: #998;\n      font-style: italic;\n    }\n\n    .hljs-command {\n      color: #005cc5;\n    }\n\n    .hljs-keyword,\n    .hljs-selector-tag,\n    .hljs-subst {\n      color: #d73a49;\n      font-weight: bold;\n    }\n\n    .hljs-number,\n    .hljs-literal,\n    .hljs-variable,\n    .hljs-template-variable,\n    .hljs-tag .hljs-attr {\n      color: #005cc5;\n    }\n\n    .hljs-string,\n    .hljs-doctag {\n      color: #24292e;\n    }\n\n    .hljs-title,\n    .hljs-section,\n    .hljs-selector-id {\n      color: #6f42c1;\n      font-weight: bold;\n    }\n\n    .hljs-subst {\n      font-weight: normal;\n    }\n\n    .hljs-type,\n    .hljs-class .hljs-title {\n      color: #458;\n      font-weight: bold;\n    }\n\n    .hljs-tag,\n    .hljs-name,\n    .hljs-attribute {\n      color: #000080;\n      font-weight: normal;\n    }\n\n    .hljs-regexp,\n    .hljs-link {\n      color: #009926;\n    }\n\n    .hljs-symbol,\n    .hljs-bullet {\n      color: #990073;\n    }\n\n    .hljs-built_in,\n    .hljs-builtin-name {\n      color: #24292e;\n    }\n\n    .hljs-meta {\n      color: #999;\n      font-weight: bold;\n    }\n\n    .hljs-meta-keyword {\n      color: #d73a49;\n    }\n\n    .hljs-meta-string {\n      color: #032f62;\n    }\n\n    .hljs-deletion {\n      background: #fdd;\n    }\n\n    .hljs-addition {\n      background: #dfd;\n    }\n\n    .hljs-emphasis {\n      font-style: italic;\n    }\n\n    .hljs-strong {\n      font-weight: bold;\n    }\n";
+export declare const codeStyles = "\n    #preview-content code, #setText code {\n      font-family: Inconsolata;\n      font-size: inherit;\n      display: initial;\n      background: #f8f8fa;\n    }\n    #preview-content .mmd-highlight code, #setText .mmd-highlight code, \n    #preview-content pre.mmd-highlight code, #setText pre.mmd-highlight code {\n      background-color: transparent;\n    }\n    #preview-content pre code, #setText pre code {\n      font-family: 'DM Mono', Inconsolata, monospace;\n      color: #333;\n      font-size: 15px;\n    }\n\n    .hljs-comment,\n    .hljs-quote {\n      color: #998;\n      font-style: italic;\n    }\n\n    .hljs-command {\n      color: #005cc5;\n    }\n\n    .hljs-keyword,\n    .hljs-selector-tag,\n    .hljs-subst {\n      color: #d73a49;\n      font-weight: bold;\n    }\n\n    .hljs-number,\n    .hljs-literal,\n    .hljs-variable,\n    .hljs-template-variable,\n    .hljs-tag .hljs-attr {\n      color: #005cc5;\n    }\n\n    .hljs-string,\n    .hljs-doctag {\n      color: #24292e;\n    }\n\n    .hljs-title,\n    .hljs-section,\n    .hljs-selector-id {\n      color: #6f42c1;\n      font-weight: bold;\n    }\n\n    .hljs-subst {\n      font-weight: normal;\n    }\n\n    .hljs-type,\n    .hljs-class .hljs-title {\n      color: #458;\n      font-weight: bold;\n    }\n\n    .hljs-tag,\n    .hljs-name,\n    .hljs-attribute {\n      color: #000080;\n      font-weight: normal;\n    }\n\n    .hljs-regexp,\n    .hljs-link {\n      color: #009926;\n    }\n\n    .hljs-symbol,\n    .hljs-bullet {\n      color: #990073;\n    }\n\n    .hljs-built_in,\n    .hljs-builtin-name {\n      color: #24292e;\n    }\n\n    .hljs-meta {\n      color: #999;\n      font-weight: bold;\n    }\n\n    .hljs-meta-keyword {\n      color: #d73a49;\n    }\n\n    .hljs-meta-string {\n      color: #032f62;\n    }\n\n    .hljs-deletion {\n      background: #fdd;\n    }\n\n    .hljs-addition {\n      background: #dfd;\n    }\n\n    .hljs-emphasis {\n      font-style: italic;\n    }\n\n    .hljs-strong {\n      font-weight: bold;\n    }\n";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mathpix-markdown-it",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "description": "Mathpix-markdown-it is an open source implementation of the mathpix-markdown spec written in Typescript. It relies on the following open source libraries: MathJax v3 (to render math with SVGs), markdown-it (for standard Markdown parsing)",
   "keywords": [
     "MathJax",

src/styles/index.ts

@@ -122,6 +122,9 @@ export const MathpixStyle = (setTextAlignJustify: boolean = false, useColors: bo
     }
     #preview-content pre code, #setText pre code{
         padding: 1rem;
+        display: block;
+        overflow-x: auto;
+        line-height: 24px;
     }
     .empty {
         text-align: center;

src/styles/styles-code.ts

@@ -11,11 +11,8 @@ export const codeStyles = `
     }
     #preview-content pre code, #setText pre code {
       font-family: 'DM Mono', Inconsolata, monospace;
-      display: block;
       color: #333;
-      overflow-x: auto;
       font-size: 15px;
-      line-height: 24px;
     }
 
     .hljs-comment,