Feat: 给未配置语言的代码块新增一个默认样式 (#560)

LuRenJiasWorld · Apr 11, 2023 · b940a2c · b940a2c
1 parent 47cbf8b
commit b940a2c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 19 deletions.
diff --git a/assets/FrontStyle/frontstyle.js → assets/FrontStyle/FrontStyle.js b/assets/FrontStyle/frontstyle.js → assets/FrontStyle/FrontStyle.js
diff --git a/assets/FrontStyle/FrontStyle.scss b/assets/FrontStyle/FrontStyle.scss
@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+// 避免主题或 WordPress 默认样式导致多行代码自动换行
+// 只用于 Fallback，如果主题有自带样式，则尊重主题样式
+pre code,
+pre code.wp-block-code,
+pre code.wp-editormd-codeblock {
+  // Copied from prism.css as a fallback style
+  // Issue ref: https://github.com/LuRenJiasWorld/WP-Editor.md/issues/560
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	tab-size: 4;
+	hyphens: none;
+}
+: 
diff --git a/src/App/WPMarkdownParser.php b/src/App/WPMarkdownParser.php
@@ -445,7 +445,7 @@ public function _doFencedCodeBlocks_callback($matches) {
                 break;
             //代码块
             default:
-                $classes = array();
+                $classes = array("wp-editormd-codeblock");
                 $langname = "";
                 if ($classname != "") {
                     if ($classname[0] == ".") {

diff --git a/webpack.common.js b/webpack.common.js
@@ -42,10 +42,10 @@ module.exports = {
   entry: {
     "assets/Editormd/editormd": "./assets/Editormd/src/editormd.js",
     "assets/Editormd/editormd.min.css": "./assets/Editormd/scss/editormd.scss",
-    "assets/Editormd/editormd.preview.min.css":
-      "./assets/Editormd/scss/editormd.preview.scss",
+    "assets/Editormd/editormd.preview.min.css": "./assets/Editormd/scss/editormd.preview.scss",
     "assets/Config/editormd": "./assets/Config/editormd.js",
-    "assets/FrontStyle/frontstyle": "./assets/FrontStyle/frontstyle.js",
+    "assets/FrontStyle/FrontStyle": "./assets/FrontStyle/FrontStyle.js",
+    "assets/FrontStyle/FrontStyle.min.css": "./assets/FrontStyle/FrontStyle.scss",
   },
   output: {
     filename: "[name].min.js",
@@ -173,15 +173,18 @@ module.exports = {
             options: {
               workers: 2,
               workerParallelJobs: 50,
-              workerNodeArgs: ['--max-old-space-size=1024'],
-              name: 'js-builders'
-            }
-          }
-        ]
+              workerNodeArgs: ["--max-old-space-size=1024"],
+              name: "js-builders",
+            },
+          },
+        ],
       },
       {
         test: /\.scss$/,
-        include: [path.resolve(__dirname, "assets/Editormd/scss")],
+        include: [
+          path.resolve(__dirname, "assets/Editormd/scss"),
+          path.resolve(__dirname, "assets/FrontStyle"),
+        ],
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
@@ -207,10 +210,9 @@ module.exports = {
         ],
       },
       {
-        test: /\.(css|scss|sass)$/,
+        test: /\.css$/,
         include: [
           path.resolve(__dirname, "assets/Config"),
-          path.resolve(__dirname, "assets/FrontStyle"),
         ],
         use: [
           {
@@ -227,13 +229,7 @@ module.exports = {
             options: {
               postcssOptions: {
                 plugins: [require("autoprefixer")({})],
-              }
-            },
-          },
-          {
-            loader: "sass-loader",
-            options: {
-              implementation: require("node-sass"),
+              },
             },
           },
         ],