impl markdown highlighting customization

sharpchen · Dec 11, 2023 · c8de360 · c8de360
1 parent aaab9d9
commit c8de360
Show file tree

Hide file tree

Showing 16 changed files with 8,240 additions and 66 deletions.
diff --git a/docs/.vitepress/cache/deps/_metadata.json b/docs/.vitepress/cache/deps/_metadata.json
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -2,10 +2,17 @@ import { DefaultTheme, PageData, defineConfig } from 'vitepress';
 import { Sidebar, generateSidebar } from 'vitepress-sidebar';
 import { DirectoryInfo, Path, documentRoot, projectRoot } from '../shared/FileSystem';
 import { getSidebar } from '../shared/utils';
+import * as shikiji from 'shikiji';
+import * as fs from 'fs';
+import { getRegisteredMarkdownTheme } from '../shared/utils';
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
     markdown: {
         lineNumbers: true,
+        theme: {
+            light: await getRegisteredMarkdownTheme('Eva-Light'),
+            dark: 'dark-plus', // await getRegisteredMarkdownTheme('vscode-dark-plus'),
+        },
     },
     locales: {
         root: {
@@ -24,24 +31,16 @@ export default defineConfig({
             { text: 'About', link: '../about.md' },
             { text: 'Contact', link: '../contact.md' },
         ],
-        logo: '../public/favicon.ico',
+        logo: '/favicon.ico',
         sidebar: getSidebar(),
         outline: {
             level: 'deep',
         },
         socialLinks: [{ icon: 'github', link: '/~https://github.com/sharpchen' }],
         siteTitle: 'sharpchen',
         externalLinkIcon: true,
-        footer: {
-            message: 'Powered by VitePress - 1.0.0-rc.25',
-            copyright: 'Copyright © 2023-present sharpchen',
-        },
         lastUpdated: {
             text: 'Last updated',
-            formatOptions: {
-                dateStyle: 'long',
-                timeStyle: 'short',
-            },
         },
         search: {
             provider: 'local',
@@ -50,5 +49,11 @@ export default defineConfig({
             prev: false,
             next: false,
         },
+        editLink: {
+            pattern: ({ filePath }) => {
+                return `/~https://github.com/sharpchen/sharpchen.github.io/blob/main/docs/${filePath}`;
+            },
+            text: 'Edit this page on GitHub',
+        },
     },
 });
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -1,4 +1,11 @@
 :root {
     --vp-home-hero-name-color: transparent;
     --vp-home-hero-name-background: -webkit-linear-gradient(120deg, rgb(86, 34, 191), rgb(251, 70, 202));
-  }
+  }
+.VPImage {
+  border-radius: 20%;
+}
+
+/* .markdown-page {
+  
+} */
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,18 +1,19 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from "vue";
-import { type Theme } from "vitepress";
-import DefaultTheme from "vitepress/theme";
-import "./style.css";
-import "./custom.css";
+import { h } from 'vue';
+import { type Theme } from 'vitepress';
+import DefaultTheme from 'vitepress/theme';
+import './style.css';
+import './custom.css';
+import DocumentLayout from '../../components/DocumentLayout.vue';
 
 export default {
-  extends: DefaultTheme,
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    });
-  },
-  enhanceApp({ app, router, siteData }) {
-    // ...
-  },
+    extends: DefaultTheme,
+    Layout: () => {
+        return h(DocumentLayout, null, {
+            // https://vitepress.dev/guide/extending-default-theme#layout-slots
+        });
+    },
+    enhanceApp({ app, router, siteData }) {
+        // ...
+    },
 } satisfies Theme;
diff --git a/docs/[docRoute].md b/docs/[docRoute].md
@@ -1,24 +1,16 @@
----
-page: true
-aside: false
----
-
-<!-- <DocumentStructure :doc-route="params!.docRoute"/> -->
-
 <script lang="ts" setup>
     import { useData } from 'vitepress';
     import { useSidebar } from 'vitepress/theme';
     import { mdLinkToHtmlLink, routeNameOfDocument } from './shared/utils';
     import { DefaultTheme } from 'vitepress'
+    import { useRouter } from 'vitepress';
 
     const { params } = useData();
     const { sidebarGroups } = useSidebar();
+    //redirecting made no frontmatter???
+    window.location.replace(getFirstDocLink(sidebarGroups.value, params.value!.docRoute));
 
-    window.location.href = getFirstDocLink(sidebarGroups.value, params.value!.docRoute);
-    console.log(sidebarGroups.value[0].collapsed);
-    sidebarGroups.value[0].collapsed = false;
-
-    function getFirstDocLink(sidebarItems: DefaultTheme.SidebarItem[],docRoute:string):string{
+    function getFirstDocLink(sidebarItems: DefaultTheme.SidebarItem[], docRoute:string): string {
         const parent = sidebarItems.filter(x => routeNameOfDocument(x.text!) === docRoute)[0];
         if (parent.items?.every(x => !x.link)) {
             return mdLinkToHtmlLink((parent.items[0])!.items![0].link!);

diff --git a/docs/components/Copyright.vue b/docs/components/Copyright.vue
@@ -1,19 +1,33 @@
 <template>
-  <div class="site-footer">
-    MIT Licensed | Copyright © 2023-
-    <a class="vitepress" :href="website">{{ webTitle }}</a
-    ><br />
-    Powered by
-    <a class="vitepress" target="_blank" href="//vitepress.vuejs.org/"
-      >VitePress - 1.0.0-rc.25</a
-    >
-  </div>
+    <div class="site-footer">
+        MIT Licensed | Copyright © 2023-present
+        <a class="bold" href="/~https://github.com/sharpchen/sharpchen.github.io" target="_blank">
+            {{ webTitle }}
+        </a>
+        <br />
+        Powered by
+        <a class="bold" target="_blank" href="//vitepress.vuejs.org/">VitePress - 1.0.0-rc.25</a>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { useData } from "vitepress";
+    import { useData } from 'vitepress';
 
-const { site, theme } = useData();
-const website = theme.value.website;
-const webTitle = site.value.title;
+    const { site, theme } = useData();
+    const webTitle = site.value.titleTemplate;
 </script>
+
+<style scoped>
+    .site-footer {
+        color: #888;
+        text-align: center;
+        font-size: 0.75rem;
+        width: 100%;
+        padding: 15px 0;
+        overflow: auto;
+    }
+    .bold {
+        color: var(--vp-c-text-1);
+        font-weight: 700;
+    }
+</style>
diff --git a/docs/components/DocumentLayout.vue b/docs/components/DocumentLayout.vue
@@ -0,0 +1,16 @@
+<template>
+    <Layout />
+    <!-- <Content /> -->
+    <Copyright />
+</template>
+
+<script lang="ts" setup>
+    import Copyright from '../components/Copyright.vue';
+    import DefaultTheme from 'vitepress/theme';
+    import { useSidebar } from 'vitepress/theme';
+    import { onMounted } from 'vue';
+    import VPSidebar from 'vitepress/dist/client/theme-default/components/VPSidebar.vue';
+    import VPSidebarItem from 'vitepress/dist/client/theme-default/components/VPSidebarItem.vue';
+    const { sidebarGroups } = useSidebar();
+    const { Layout } = DefaultTheme;
+</script>
diff --git a/docs/index.md b/docs/index.md
@@ -3,16 +3,8 @@
 layout: home
 title: "Home"
 hero:
-  name: "Welcome to my"
-  text: "Personal Documented Notes"
-  actions:
-    - theme: brand
-      text: Markdown Examples
-      # link: /markdown-examples
-    - theme: alt
-      text: API Examples
-      # link: /api-examples
-
+  name: "Documents"
+  # text: "Personal Documented Notes"
 features:
   - title: SQL
     details: SQL syntax for beginners with MySQL
@@ -29,5 +21,35 @@ features:
     icon: 👾
     link: /csharpdesignpatterns
     linkText: Get started
+  - title: JavaScript
+    details: JavaScript for C# developer
+    icon: 🦖
+    link: /javascript
+    linkText: Get started
+  - title: TypeScript
+    details: TypeScript for C# developer
+    icon: ⌨
+    link: /
+    linkText: Get started
+  - title: Rust
+    details: Rust for C# developer
+    icon: 🦀
+    link: /
+    linkText: Get started
+  - title: Python
+    details: Python for C# developer
+    icon: 🐍
+    link: /
+    linkText: Get started
+  - title: Java
+    details: Java for C# developer
+    icon: ☕
+    link: /
+    linkText: Get started
+  - title: Vue3
+    details: Vue3 for .NET blazor developer
+    icon: ⚡
+    link: /
+    linkText: Get started
 ---