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

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

Hide file tree

Showing 4 changed files with 26 additions and 13 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,20 @@
+@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",
@@ -207,10 +207,9 @@ module.exports = {
         ],
       },
       {
-        test: /\.(css|scss|sass)$/,
+        test: /\.css$/,
         include: [
           path.resolve(__dirname, "assets/Config"),
-          path.resolve(__dirname, "assets/FrontStyle"),
         ],
         use: [
           {
@@ -227,13 +226,7 @@ module.exports = {
             options: {
               postcssOptions: {
                 plugins: [require("autoprefixer")({})],
-              }
-            },
-          },
-          {
-            loader: "sass-loader",
-            options: {
-              implementation: require("node-sass"),
+              },
             },
           },
         ],