添加基础 markdown 样式表和 highlight.js 引入，更新 toolbar 技术结构

assets/bread-card-markdown-compat-highlight-js.css

@@ -0,0 +1,27 @@
+/******************************************************************************
+ ##############################################################################
+ #####                                                                    #####
+ #####   Markdown StyleSheet of ui design BreadCard                       #####
+ #####     compatibility layer                                            #####
+ #####     for highlight.js                                               #####
+ #####                                                                    #####
+ #####     @author: Sukazyo Workshop                                      #####
+ #####     @version： 1.0                                                 #####
+ #####                                                                    #####
+ ##############################################################################
+ ******************************************************************************/
+
+:root {
+	--bcm-color-highlight-bg: #223b5c; /* user define */
+}
+
+pre {
+	background: var(--bcm-color-highlight-bg);
+}
+
+.hljs,
+code.hljs,
+pre code.hljs {
+	background: var(--bcm-color-highlight-bg);
+	padding: 0.2rem 1.2rem 0.6rem;
+}

assets/bread-card-markdown.css

@@ -0,0 +1,179 @@
+/******************************************************************************
+ ##############################################################################
+ #####                                                                    #####
+ #####   Markdown StyleSheet of ui design BreadCard                       #####
+ #####                                                                    #####
+ #####     @author: Sukazyo Workshop                                      #####
+ #####     @version： 1.0                                                 #####
+ #####                                                                    #####
+ ##############################################################################
+ ******************************************************************************/
+
+:root {
+	
+	--bcm-color-font-base: #223b5c;
+	--bcm-color-font-base-link: #409dff;
+	--bcm-color-font-base-link-hover: #0033ff;
+	--bcm-color-font-base-link-visited: #a27aeb;
+	--bcm-color-font-base-link-visited-hover: #5a00ff;
+	--bcm-color-font-base-link-focus-bg: #33aee92b;
+	
+	--bcm-color-blockquote-focus: #e2e5e8;
+	--bcm-color-blockquote-foreground: #949da9;
+	
+	--bcm-color-list-item-marker-std: #949da9;
+	
+	--bcm-color-seperator: #e2e5e8;
+	
+}
+
+:root {
+	--bcm-element-href-anima-speed: 0.1s;
+}
+
+html {
+	color: var(--bcm-color-font-base);
+}
+
+/*article * {*/
+/*	margin-bottom: 1rem;*/
+/*}*/
+
+a {
+	color: var(--bcm-color-font-base-link);
+	text-decoration: none;
+	transition:
+			color var(--bcm-element-href-anima-speed),
+			background-color var(--bcm-element-href-anima-speed);
+	border-radius: 0.3rem;
+}
+
+a:hover {
+	color: var(--bcm-color-font-base-link-hover);
+}
+
+a:visited {
+	color: var(--bcm-color-font-base-link-visited);
+}
+
+a:visited:hover {
+	color: var(--bcm-color-font-base-link-visited-hover);
+}
+
+a:focus-visible {
+	background-color: var(--bcm-color-font-base-link-focus-bg);
+	outline: none;
+}
+
+hr {
+	background-color: var(--bcm-color-seperator);
+	height: 0.25rem;
+	border-radius: 1rem;
+	width: 70%;
+	border: none;
+}
+
+hr {
+	margin-block-start: 3rem;
+	margin-block-end: 3rem;
+}
+
+p,
+h1, h2, h3, h4, h5, h6,
+ul, ol, table {
+	margin-block-start: 1.6rem;
+	margin-block-end: 1.6rem;
+	
+	line-height: 1.6;
+}
+
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+	margin-block-start: inherit;
+	margin-block-end: inherit;
+}
+
+ul, ol {
+	padding-inline-start: 1.2rem;
+}
+
+li::marker {
+	color: var(--bcm-color-list-item-marker-std);
+}
+
+ol > li::marker {
+	font-size: 0.65rem;
+}
+
+blockquote {
+	margin-block-start: 2.6rem;
+	margin-block-end: 2.6rem;
+}
+
+blockquote {
+	position: relative;
+	margin-inline-start: 0;
+	margin-inline-end: 0;
+	padding-left: 0.88rem;
+	color: var(--bcm-color-blockquote-foreground);
+}
+
+blockquote:before {
+	content: "";
+	position: absolute;
+	top: -0.5rem;
+	bottom: -0.5rem;
+	left: 0;
+	width: 0.25rem;
+	border-radius: 0.5rem;
+	background: var(--bcm-color-blockquote-focus);
+}
+
+code {
+	padding: 0.2rem;
+	border-radius: 0.3rem;
+	background: #f1f1f1;
+	font-size: 0.85rem;
+}
+
+pre {
+	margin: 0 1.4rem;
+	padding: 0.7rem 0;
+	border-radius: 0.5rem;
+	display: block;
+	background: #223b5c;
+	color: aliceblue;
+	overflow: hidden;
+	font-size: 14px;
+}
+
+pre code {
+	display: block;
+	background: #223b5c;
+	overflow-x: scroll;
+	padding: 0.2rem 1.2rem 0.6rem;
+	line-height: 1.4;
+	font-size: inherit;
+}
+
+pre code::-webkit-scrollbar {
+	-webkit-appearance: none;
+	height: 0.25rem;
+	border-radius: 0.5rem;
+	background: none;
+}
+
+pre code::-webkit-scrollbar-thumb {
+	height: 0.25rem;
+	border-radius: 0.5rem;
+	background: var(--color-scrollbar-main-foreground);
+}
+
+pre code::-webkit-scrollbar-track {
+	height: 0.25rem;
+	border-radius: 0.5rem;
+	background: none;
+	margin: 0.7rem;
+}

assets/main.css

@@ -75,7 +75,9 @@
 	
 	--article-padding-height: 2rem;
 	--article-padding-width: 2rem;
-	--article-margin-top: 3rem;
+	/*--article-margin-top: 3rem;*/
+	--article-margin-top: 0;
+	--article-margin-bottom: 30vh;
 	--article-width-max: 800px;
 	
 }
@@ -266,6 +268,7 @@ body {
 	flex-direction: column;
 	color: var(--color-font-sidebar);
 	overflow: hidden;
+	z-index: 99;
 }
 
 #sidebar .sidebar-card {
@@ -361,6 +364,7 @@ body {
 	display: block;
 	padding: 0.55rem 0;
 	position: relative;
+	-webkit-tap-highlight-color: transparent;
 	transition: color calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier));
 }
 
@@ -458,12 +462,18 @@ body {
  ******************************************************************/
 #main {
 	color: var(--color-font-base);
-	margin: var(--main-margin-height) var(--main-margin-width);
+	margin: 0 var(--main-margin-width);
 	flex-grow: 1;
 	overflow: auto;
 	position: relative;
 }
 
+#main > #main-heading {
+	padding-top: var(--main-margin-height);
+	position: sticky;
+	top: 0;
+}
+
 #main::-webkit-scrollbar {
 	width: var(--main-scrollbar-width);
 	border-radius: calc(var(--main-scrollbar-width) / 2);
@@ -480,15 +490,16 @@ body {
 	width: var(--main-scrollbar-width);
 	border-radius: calc(var(--main-scrollbar-width) / 2);
 	background: var(--color-scrollbar-main-background);
+	margin: var(--main-margin-height);
 }
 
 #page-tools {
-	position: absolute;
-	top: 0;
-	left: 0;
 	color: var(--color-font-tools-button);
+	/*background-color: #ffffff;*/
+	border-radius: 0.5rem;
 	font-size: var(--tools-font-size);
 	font-weight: bold;
+	z-index: 100;
 }
 
 #page-tools > button {
@@ -512,7 +523,8 @@ body {
  **      page content                                            **
  ******************************************************************/
 #article {
-	margin: var(--article-margin-top) auto 0;
+	margin: var(--article-margin-top) auto var(--article-margin-bottom);
 	padding: var(--article-padding-height) var(--article-padding-width);
+	padding-right: calc(var(--article-padding-width));
 	max-width: var(--article-width-max);
 }

assets/main.js

@@ -58,6 +58,8 @@ function sidebarToggle() {
 if (window.innerWidth > 1000) { sidebarToggle(); }
 
 EventUtil.bindEvent(itemSidebar, 'swipeleft', sidebarToggle)
+// EventUtil.bindEvent(document.body, 'swipeleft', function () { if (itemSidebar.parentElement.classList.contains("show-sidebar")) { sidebarToggle(); } });
+// EventUtil.bindEvent(document.body, 'swiperight', function () { if (!itemSidebar.parentElement.classList.contains("show-sidebar")) { sidebarToggle(); } });
 
 
 

constant.php

@@ -2,6 +2,6 @@
 
 const APP_NAME = "ph-Bookshelf";
 
-const VERSION = "0.3.0.7";
+const VERSION = "0.3.0.8";
 const CHANNEL = "suk-ws";
 const BRANCH = "master";

src/Data/SiteMeta.php

@@ -36,6 +36,10 @@ class SiteMeta {
 //			"/assets/gitbook/gitbook-plugin-fontsettings/website.css",
 //			"/assets/gitbook-fix.css",
 //			"/assets/ref.css",
+			"//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/atom-one-dark.min.css",
+			"/assets/bread-card-markdown.css",
+			"/assets/bread-card-markdown-enhanced-listing-rainbow.css",
+			"/assets/bread-card-markdown-compat-highlight-js.css",
 			"/assets/main.css",
 		);
 	}
@@ -46,6 +50,7 @@ class SiteMeta {
 //			"/assets/gitbook-fix.js",
 //			"https://cdn.jsdelivr.net/npm/marked/marked.min.js",
 //			"/assets/ref.js",
+			"//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js",
 			"/assets/utils-touchscreen-event.js",
 			"/assets/main.js",
 		);

template/footer.php

@@ -10,6 +10,7 @@
 		<script>
 			bookCurrentId = "<?= PageMeta::$book->getId() ?>";
 			pageCurrentId = "<?= PageMeta::$page->getId() ?>";
+			hljs.highlightAll();
 		</script>
 		
 	</body>

template/main.php

@@ -1,7 +1,7 @@
 <main id="main">
-	<div id="page-tools">
+	<div id="main-heading"><div id="page-tools">
 		<button id="sidebar-show">☰</button>
-	</div>
+	</div></div>
 	<article id="article">
 		<?php require "./template/raw-article.php" ?>
 	</article>