Quartz sync: Jun 5, 2025, 11:35 PM

Author: codeyoma

content/z-index/Guideline.md

@@ -1,7 +1,7 @@
 ---
 description: 
 created: 2023-12-01
-modified: 2025-06-04
+modified: 2025-06-05
 status:
   - 🗺️
 tags:
@@ -83,7 +83,7 @@ markmap:
 	* ...
 
 # Quartz Frontmatter
-```
+```text
 title: Title of the page
 description: Description of the page used for link previews.
 date: 2025-05-01
@@ -161,7 +161,7 @@ draft: true
 	- [ ] Subtask 1
 
 ## Horizontal rule
-```
+```text
 ***
 ****
 * * *
@@ -203,7 +203,7 @@ int main() {
 [^2]
 [^note]
 - 
-	```
+	```text
 	This is a simple footnote[^1].[^1][^1]
 	[^2]
 	[^note]
@@ -216,7 +216,7 @@ int main() {
 
 - You can also use inline footnotes. ^[This is an inline footnote.]
 - 
-	```
+	```text
 	You can also use inline footnotes. ^[This is an inline footnote.]
 	```
 

quartz/components/scripts/slide.inline.ts

@@ -1,6 +1,44 @@
 import { mouseEnterHandler, clearActivePopover } from './popover.inline'
 import { SlideOptions } from '../Slide'
 
+function addClipboard() {
+  const svgCopy =
+    '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>'
+  const svgCheck =
+    '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'
+
+  const els = document.getElementsByTagName("pre")
+  for (let i = 0; i < els.length; i++) {
+    const button = els[i].querySelector(".clipboard-button") as HTMLButtonElement | null
+    const codeBlock = els[i].getElementsByTagName("code")[0]
+
+    if (!button || !codeBlock) continue
+
+    const source = (
+      codeBlock.dataset.clipboard ? JSON.parse(codeBlock.dataset.clipboard) : codeBlock.innerText
+    ).replace(/\n\n/g, "\n")
+
+    function onClick() {
+      navigator.clipboard.writeText(source).then(
+        () => {
+          if (button) {
+            button.blur()
+            button.innerHTML = svgCheck
+            setTimeout(() => {
+              button.innerHTML = svgCopy;
+              button.style.borderColor = ""
+            }, 2000)
+          }
+        },
+        (error) => console.error(error),
+      )
+    }
+
+    button.addEventListener("click", onClick)
+    window.addCleanup(() => button.removeEventListener("click", onClick))
+  }
+}
+
 function renderPopoverInSlide() {
   const mindmapLinks = document.querySelectorAll(".remark-slide-content a.internal") as NodeListOf<HTMLAnchorElement>
   for (const link of mindmapLinks) {
@@ -79,8 +117,11 @@ function renderMermaidInSlide() {
   })
 }
 
+
 function anchorBlank(html: string): string {
-  return html.replace(/<a\b([^>]*?)>/g, '<a $1 target="_blank">')
+  // return html.replace(/<a\b([^>]*?)>/g, '<a $1 target="_blank">')
+  // return html.replace(/(?<!<sup>)<a\b([^>]*?)>/g, '<a $1 target="_blank">')
+  return html
 }
 
 function unwrapSlideNote(html: string): string {
@@ -94,11 +135,7 @@ function unwrapFootnotesSection(html: string): string {
   )
 }
 
-function collapseSeparators(input: string): string {
-  return input.replace(/(?:\n*\s*---\s*\n*){2,}/g, '\n---\n')
-}
-
-function injectSeparators(html: string, separator = "\n---\n"): string {
+function injectSeparators(html: string, separator: string): string {
   let firstHeadingInjected = false
 
   return html
@@ -113,6 +150,45 @@ function injectSeparators(html: string, separator = "\n---\n"): string {
     })
 }
 
+function handleFootnote(data: string, separator: string) {
+  const slides = data.split(separator)
+  const refIndexMap = new Map<string, number>()
+
+  slides.forEach((slide, index) => {
+    const regex = /<sup><a [^>]*?id="(user-content-fnref[^"]+)"/g
+
+    let match
+    while ((match = regex.exec(slide)) !== null) {
+      const id = match[1]
+      refIndexMap.set(`#${id}`, index + 1)
+    }
+
+    const hrefRegex = /<sup><a href="(#user-content-fn[^"]+)"/g
+    slide = slide.replace(hrefRegex, () => {
+      return `<sup><a href="${window.location.pathname}#${slides.length}"`
+    })
+
+    // const refRegex = /<sup><a\s+[^>]*?href="([^"]+)"[^>]*?id="user-content-fnref-([\d-]+)"[^>]*?>.*?<\/a><\/sup>/g
+    // slide = slide.replace(refRegex, (_, href, refText) => {
+    //   return `<sup><a href="${window.location.pathname}#${slides.length}">${refText}</a></sup>`
+    // })
+
+    slides[index] = slide
+  })
+
+  slides[slides.length - 1] = slides[slides.length - 1].replace(
+    /<a\s+([^>]*?)href="(#user-content-fn[^"]+)"([^>]*)>/g,
+    (fullMatch, beforeHref, href, afterHref) => {
+      if (refIndexMap.has(href)) {
+        return `<a ${beforeHref}href="${window.location.pathname}#${refIndexMap.get(href)}"${afterHref}>`
+      }
+      return fullMatch
+    }
+  )
+
+  return slides.join("\n---\n")
+}
+
 function appendRemark(option: SlideOptions) {
 
   const header = `${document.querySelector(".page-header h1.article-title")?.outerHTML}`
@@ -122,17 +198,23 @@ function appendRemark(option: SlideOptions) {
     console.warn("No header found in the document. Cannot render slide.")
     return;
   }
+  const separator = "\n---\n<div id=\"inject-slide\"></div>";
 
   const body = document.querySelector(".center article")?.innerHTML
-  const data = anchorBlank(
-    unwrapSlideNote(
-      unwrapFootnotesSection(
-        collapseSeparators(
-          injectSeparators(header + tags + body)
+
+  // sorry callback hell
+  const data =
+    anchorBlank(
+      unwrapSlideNote(
+        unwrapFootnotesSection(
+          handleFootnote(
+            injectSeparators(header + tags + body, separator),
+            separator
+          )
         )
       )
     )
-  )
+
   document.body.innerHTML = ""
 
   const script = document.createElement("script")
@@ -147,6 +229,7 @@ function appendRemark(option: SlideOptions) {
       () => {
         renderMermaidInSlide()
         renderPopoverInSlide()
+        addClipboard()
       }
     )
   }

quartz/components/styles/mindmap.scss

@@ -24,7 +24,9 @@
 
       code {
         border-radius: 3px;
-        padding: 0;
+        padding: 7px;
+        background-color: var(--shiki-light-bg);
+        color: var(--shiki-light);
       }
 
       img {

quartz/static/scripts/slide.js

@@ -3733,7 +3733,7 @@ function(hljs){
 
   // общий паттерн для определения идентификаторов
   var UNDERSCORE_IDENT_RE = '[A-Za-zА-Яа-яёЁ_][A-Za-zА-Яа-яёЁ_0-9]+';
-
+  
   // v7 уникальные ключевые слова, отсутствующие в v8 ==> keyword
   var v7_keywords =
   'далее ';
@@ -3745,7 +3745,7 @@ function(hljs){
 
   // keyword : ключевые слова
   var KEYWORD = v7_keywords + v8_keywords;
-
+  
   // v7 уникальные директивы, отсутствующие в v8 ==> meta-keyword
   var v7_meta_keywords =
   'загрузитьизфайла ';
@@ -3762,7 +3762,7 @@ function(hljs){
   // v7 системные константы ==> built_in
   var v7_system_constants =
   'разделительстраниц разделительстрок символтабуляции ';
-
+  
   // v7 уникальные методы глобального контекста, отсутствующие в v8 ==> built_in
   var v7_global_context_methods =
   'ansitooem oemtoansi ввестивидсубконто ввестиперечисление ввестипериод ввестиплансчетов выбранныйплансчетов ' +
@@ -3776,7 +3776,7 @@ function(hljs){
   'префиксавтонумерации пропись пустоезначение разм разобратьпозициюдокумента рассчитатьрегистрына ' +
   'рассчитатьрегистрыпо симв создатьобъект статусвозврата стрколичествострок сформироватьпозициюдокумента ' +
   'счетпокоду текущеевремя типзначения типзначениястр установитьтана установитьтапо фиксшаблон шаблон ';
-
+  
   // v8 методы глобального контекста ==> built_in
   var v8_global_context_methods =
   'acos asin atan base64значение base64строка cos exp log log10 pow sin sqrt tan xmlзначение xmlстрока ' +
@@ -3871,7 +3871,7 @@ function(hljs){
   v7_system_constants +
   v7_global_context_methods + v8_global_context_methods +
   v8_global_context_property;
-
+  
   // v8 системные наборы значений ==> class
   var v8_system_sets_of_values =
   'webцвета windowsцвета windowsшрифты библиотекакартинок рамкистиля символы цветастиля шрифтыстиля ';
@@ -4023,7 +4023,7 @@ function(hljs){
   'кодировкаименфайловвzipфайле методсжатияzip методшифрованияzip режимвосстановленияпутейфайловzip режимобработкиподкаталоговzip ' +
   'режимсохраненияпутейzip уровеньсжатияzip ';
 
-  // v8 системные перечисления -
+  // v8 системные перечисления - 
   // Блокировка данных, Фоновые задания, Автоматизированное тестирование,
   // Доставляемые уведомления, Встроенные покупки, Интернет, Работа с двоичными данными ==> class
   var v8_system_enums_other =
@@ -4142,7 +4142,7 @@ function(hljs){
 
   // literal : примитивные типы
   var LITERAL = 'null истина ложь неопределено';
-
+  
   // number : числа
   var NUMBERS = hljs.inherit(hljs.NUMBER_MODE);
 
@@ -4163,10 +4163,10 @@ function(hljs){
       }
     ]
   };
-
+  
   // comment : комментарии
   var COMMENTS = hljs.inherit(hljs.C_LINE_COMMENT_MODE);
-
+  
   // meta : инструкции препроцессора, директивы компиляции
   var META = {
     className: 'meta',
@@ -4177,13 +4177,13 @@ function(hljs){
       COMMENTS
     ]
   };
-
+  
   // symbol : метка goto
   var SYMBOL = {
     className: 'symbol',
     begin: '~', end: ';|:', excludeEnd: true
-  };
-
+  };  
+  
   // function : объявление процедур и функций
   var FUNCTION = {
     className: 'function',
@@ -4235,7 +4235,7 @@ function(hljs){
       NUMBERS,
       STRINGS,
       DATE
-    ]
+    ]  
   }
 }},{name:"abnf",create:/*
 Language: Augmented Backus-Naur Form
@@ -5643,7 +5643,7 @@ function(hljs) {
         ]
       },
       {
-        className: 'meta',
+        className: 'meta', 
         begin: '^\\s*#\\w+', end:'$',
         relevance: 0
       },
@@ -28385,40 +28385,40 @@ function highlightCodeBlocks (content, slideshow) {
       highlightInline = slideshow.getHighlightInlineCode(),
       meta;
 
-  codeBlocks.forEach(function (block) {
-    if (block.className === '') {
-      block.className = slideshow.getHighlightLanguage();
-    }
+  // codeBlocks.forEach(function (block) {
+  //   if (block.className === '') {
+  //     block.className = slideshow.getHighlightLanguage();
+  //   }
 
-    if (block.parentElement.tagName !== 'PRE') {
-      utils.addClass(block, 'remark-inline-code');
-      if (highlightInline) {
-        highlighter.engine.highlightBlock(block, '');
-      }
-      return;
-    }
+  //   if (block.parentElement.tagName !== 'PRE') {
+  //     utils.addClass(block, 'remark-inline-code');
+  //     if (highlightInline) {
+  //       highlighter.engine.highlightBlock(block, '');
+  //     }
+  //     return;
+  //   }
 
-    if (highlightLines) {
-      meta = extractMetadata(block);
-    }
+  //   if (highlightLines) {
+  //     meta = extractMetadata(block);
+  //   }
 
-    if (block.className !== '') {
-      highlighter.engine.highlightBlock(block, '  ');
-    }
+  //   if (block.className !== '') {
+  //     highlighter.engine.highlightBlock(block, '  ');
+  //   }
 
-    wrapLines(block);
+  //   wrapLines(block);
 
-    if (highlightLines) {
-      highlightBlockLines(block, meta.highlightedLines);
-    }
+  //   if (highlightLines) {
+  //     highlightBlockLines(block, meta.highlightedLines);
+  //   }
 
-    if (highlightSpans) {
-      // highlightSpans is either true or a RegExp
-      highlightBlockSpans(block, highlightSpans);
-    }
+  //   if (highlightSpans) {
+  //     // highlightSpans is either true or a RegExp
+  //     highlightBlockSpans(block, highlightSpans);
+  //   }
 
-    utils.addClass(block, 'remark-code');
-  });
+  //   utils.addClass(block, 'remark-code');
+  // });
 }
 
 function extractMetadata (block) {
@@ -28487,6 +28487,7 @@ function highlightBlockSpans (block, highlightSpans) {
       });
   });
 }
+
 },{"../components/slide-number/slide-number":"components/slide-number","../converter":13,"../highlighter":15,"../utils":25}],28:[function(require,module,exports){
 var SlideView = require('./slideView')
   , Timer = require('../components/timer/timer')