弹出式注释

app/guide/guide.js

@@ -1,61 +1,57 @@
 function guide_init() {
-  $("guide").each(function () {
-    if ($(this).attr("init") != "1") {
-      if ($(this).text().length > 0) {
-        $(this).css("background", "unset");
-      }
-      if ($(this).offset().left < $(document.body).width() / 2) {
-        $(this).append(
-          '<div  class="guide_contence" style="left: -5px;"></div>'
-        );
-        $(".guide_contence:after").css("left", "0");
-      } else {
-        $(this).append(
-          '<div  class="guide_contence" style="right: -5px;"></div>'
-        );
-        $(".guide_contence:after").css("right", "0");
-      }
-      $(this).attr("init", "1");
-    }
-  });
+	$("guide").each(function () {
+		if ($(this).attr("init") != "1") {
+			if ($(this).text().length > 0) {
+				$(this).css("background", "unset");
+			}
+			if ($(this).offset().left < $(document.body).width() / 2) {
+				$(this).append('<div  class="guide_contence" style="left: -5px;"></div>');
+				$(".guide_contence:after").css("left", "0");
+			} else {
+				$(this).append('<div  class="guide_contence" style="right: -5px;"></div>');
+				$(".guide_contence:after").css("right", "0");
+			}
+			$(this).attr("init", "1");
+		}
+	});
 
-  $("guide").mouseenter(function () {
-    if ($(this).children(".guide_contence").first().html().length > 0) {
-      return;
-    }
-    let gid = $(this).attr("gid");
-    $.get(
-      "../guide/get.php",
-      {
-        id: gid,
-      },
-      function (data, status) {
-        try {
-          let jsonGuide = JSON.parse(data);
-          $("guide[gid='" + jsonGuide.id + "']")
-            .find(".guide_contence")
-            .html(marked(jsonGuide.data));
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    );
-  });
+	$("guide").mouseenter(function () {
+		if ($(this).children(".guide_contence").first().html().length > 0) {
+			return;
+		}
+		let gid = $(this).attr("gid");
+		$.get(
+			"../guide/get.php",
+			{
+				id: gid,
+			},
+			function (data, status) {
+				try {
+					let jsonGuide = JSON.parse(data);
+					$("guide[gid='" + jsonGuide.id + "']")
+						.find(".guide_contence")
+						.html(marked(jsonGuide.data));
+				} catch (e) {
+					console.error(e);
+				}
+			}
+		);
+	});
 }
 
 function guide_get(guide_id) {
-  $.get(
-    "../guide/get.php",
-    {
-      id: guide_id,
-    },
-    function (data, status) {
-      try {
-        let jsonGuide = JSON.parse(data);
-        $("#guide_" + jsonGuide.id).html(marked(jsonGuide.data));
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  );
+	$.get(
+		"../guide/get.php",
+		{
+			id: guide_id,
+		},
+		function (data, status) {
+			try {
+				let jsonGuide = JSON.parse(data);
+				$("#guide_" + jsonGuide.id).html(marked(jsonGuide.data));
+			} catch (e) {
+				console.error(e);
+			}
+		}
+	);
 }

app/pcdl/html_head.php

@@ -56,6 +56,10 @@ else{
 			echo '<link type="text/css" rel="stylesheet" href="../term/term_para.css"/>';
 		}
 		?>
+	
+	<script src="../term/popup_note.js"></script>
+	<link type="text/css" rel="stylesheet" href="../term/popup_note.css"/>
+
 	<script src="../term/term_edit_dlg.js"></script>
 	<link type="text/css" rel="stylesheet" href="../term/term_edit_dlg.css"/>	
 	<script src="../uwbw/wbw_channal_list.js"></script>

app/term/guide_icon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 14 14" style="fill: #6baaff;" xml:space="preserve">
+	<path d="M7,0C3.134,0,0,3.134,0,7s3.134,7,7,7s7-3.134,7-7S10.866,0,7,0z M7,2c0.552,0,1,0.447,1,1S7.552,4,7,4S6,3.553,6,3
+	S6.448,2,7,2z M9,11H5v-1h1V6H5V5h3v5h1V11z" />
+</svg>

app/term/note.js

@@ -213,6 +213,8 @@ function note_refresh_new() {
 								$("#" + id).html(strHtml);
 							}
 						}
+						//处理<code>标签作为气泡注释
+						popup_init();
 						//刷新句子链接递归，有加层数限制。
 						note_refresh_new();
 

app/term/popup_note.css

@@ -0,0 +1,89 @@
+code {
+	position: relative;
+	display: inline-block;
+	width: auto;
+	min-width: 14px;
+	height: auto;
+	min-height: 14px;
+	cursor: pointer;
+	background: url(guide_icon.svg);
+	background-repeat: no-repeat;
+	background-size: contain;
+	margin: 0 6px;
+	color: var(--tool-color);
+}
+code:hover .popup_contence {
+	display: inline-block;
+}
+code ul {
+	list-style-type: disc;
+	padding-left: 20px;
+}
+code ol {
+	list-style-type: decimal;
+	padding-left: 20px;
+}
+.popup_contence {
+	border-top: 7px;
+	position: absolute;
+	border: 1px solid var(--border-line-color);
+	border-radius: 5px;
+	top: 180%;
+	width: max-content;
+	min-width: 18em;
+	max-width: max(25vw, 100%);
+	min-height: 15em;
+	padding: 10px;
+	background-color: var(--drop-bg-color);
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+	font-size: 10pt;
+	text-align: left;
+	display: none;
+
+	margin: 0.3em;
+	margin: -1px 0px;
+	box-shadow: 0px 3px 13px 0px var(--shadow-color);
+	color: var(--main-color);
+	z-index: 200;
+}
+
+.popup_contence:after {
+	content: "\00a0";
+	width: 0;
+	height: 0;
+	display: block;
+	border-style: solid;
+	border-width: 10px;
+	border-color: transparent transparent var(--drop-bg-color) transparent;
+	position: absolute;
+	top: -20px;
+}
+
+.popup_contence h1 {
+	font-size: 1.5em;
+	font-weight: 700;
+}
+.popup_contence h2 {
+	font-size: 1.3em;
+	font-weight: 700;
+}
+.popup_contence h3 {
+	font-size: 1.1em;
+	font-weight: 700;
+}
+.popup_contence h4 {
+	font-size: 1em;
+	font-weight: 700;
+}
+.popup_contence li {
+	white-space: normal;
+	word-break: normal;
+}
+.popup_contence pre {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+.popup_contence code {
+	white-space: normal;
+	word-break: normal;
+	font-family: arial;
+}

app/term/popup_note.js

@@ -0,0 +1,19 @@
+function popup_init() {
+	$("code").each(function () {
+		if ($(this).attr("init") != "1") {
+			if ($(this).text().length == 0) {
+				return;
+			}
+			const noteText = $(this).html();
+			$(this).html("");
+			if ($(this).offset().left < $(document.body).width() / 2) {
+				$(this).append('<div  class="popup_contence" style="left: -15px;">' + noteText + "</div>");
+				$(".popup_contence:after").css("left", "0");
+			} else {
+				$(this).append('<div  class="popup_contence" style="right: -15px;">' + noteText + "</div>");
+				$(".popup_contence:after").css("right", "0");
+			}
+			$(this).attr("init", "1");
+		}
+	});
+}