### HTML Avatar Example

Source: https://github.com/bingyanstudio/lapiscv/blob/main/README.md

Use this HTML snippet to embed an avatar image. Ensure the 'src' attribute points to a valid image URL. Local images are not recommended for Obsidian.

```html
<img alt="avatar" src="...">
```

--------------------------------

### Tailwind CSS Configuration

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

Configuration for Tailwind CSS, including custom colors, fonts, animations, and keyframes. This setup is used to style the LapisCV theme.

```javascript
tailwind.config = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: {
          light: "#4870ac",
          DEFAULT: "#4870ac",
          dark: "#3a5a8a",
        },
        secondary: {
          light: "#2f86d2",
          DEFAULT: "#2f86d2",
          dark: "#2568a8",
        },
        accent: {
          light: "#5e76c3",
          DEFAULT: "#5e76c3",
          dark: "#4a5d9a",
        },
      },
      fontFamily: {
        sans: ["Inter", "ui-sans-serif", "system-ui"],
        serif: ["SourceHanSerifCN", "ui-serif", "Georgia"],
        mono: ["JetBrainsMono", "ui-monospace", "SFMono-Regular"],
      },
      animation: {
        "fade-in": "fadeIn 0.5s ease-in-out",
      },
      keyframes: {
        fadeIn: {
          "0%": {
            opacity: "0"
          },
          "100%": {
            opacity: "1"
          },
        },
      },
    },
  },
};
```

--------------------------------

### Smooth Scrolling for Anchor Links

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/index.html

Implements smooth scrolling behavior for anchor links within the page. Ensures that clicking a link starting with '#' scrolls to the corresponding element.

```javascript
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener("click", function (e) {
        e.preventDefault();
        const targetId = this.getAttribute("href");
        if (targetId === "#") return;
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
            targetElement.scrollIntoView({
                behavior: "smooth",
            });
        }
    });
});
```

--------------------------------

### Build LapisCV from Source

Source: https://github.com/bingyanstudio/lapiscv/blob/main/README.md

Clone the repository, navigate to the project directory, and run the 'make' command to build the project. Finally, list the contents of the 'build' directory to verify the build.

```shell
git clone git@github.com:BingyanStudio/LapisCV.git
cd LapisCV
make
ls build
```

--------------------------------

### Theme Toggle Functionality

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/index.html

Handles switching between light and dark themes based on user preference or system settings. Saves the selected theme to local storage.

```javascript
const themeToggle = document.getElementById("theme-toggle");
const html = document.documentElement;

// Check for saved theme preference or use system preference
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
    html.classList.add(savedTheme);
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    html.classList.add("dark");
}

// Toggle theme
themeToggle.addEventListener("click", () => {
    if (html.classList.contains("dark")) {
        html.classList.remove("dark");
        localStorage.setItem("theme", "light");
    } else {
        html.classList.add("dark");
        localStorage.setItem("theme", "dark");
    }
});
```

--------------------------------

### VSCode Theme Configuration

Source: https://github.com/bingyanstudio/lapiscv/blob/main/README.md

Configure LapisCV themes in VSCode by modifying the markdown.styles path in settings.json. Use lapis-cv.css for the standard theme and lapis-cv-serif.css for the Serif theme.

```json
"markdown.styles": [
    "./lapis-cv/styles/main.css",
    "./lapis-cv/styles/lapis-cv.css", // lapis-cv-serif.css for Serif
]
```

--------------------------------

### VSCode PDF Export Settings

Source: https://github.com/bingyanstudio/lapiscv/blob/main/README.md

Configure VSCode settings for PDF export, enabling header/footer display and defining their templates for page numbering.

```json
"markdown-pdf.displayHeaderFooter": true,
"markdown-pdf.headerTemplate": "<div></div>",
"markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; margin: 0 auto;\"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>"
```

--------------------------------

### Theme Toggle JavaScript

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

Implements a theme toggle functionality using local storage to persist user preference. It checks for saved themes or defaults to system preference.

```javascript
// Theme toggle
const themeToggle = document.getElementById("theme-toggle");
const html = document.documentElement;

// Check for saved theme preference or use system preference
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
    html.classList.add(savedTheme);
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    html.classList.add("dark");
}

// Toggle theme
themeToggle.addEventListener("click", () => {
    if (html.classList.contains("dark")) {
        html.classList.remove("dark");
        localStorage.setItem("theme", "light");
    } else {
        html.classList.add("dark");
        localStorage.setItem("theme", "dark");
    }
});
```

--------------------------------

### VSCode Markdown-PDF Settings for Page Numbers

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

Configure VSCode's markdown-pdf extension to display page numbers in the footer. Ensure 'markdown-pdf.displayHeaderFooter' is set to true.

```json
"markdown-pdf.displayHeaderFooter": true,
    "markdown-pdf.headerTemplate": "<div></div>",
    "markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; margin: 0 auto;\"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>"
```

--------------------------------

### Tailwind CSS Utility Classes for Styling

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

Custom CSS classes using Tailwind CSS principles for styling elements like cards, buttons, and animations. Includes hover effects and animation delays.

```css
.prose { max-width: 100%; }
.prose :where(img):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.dark .prose {
  --tw-prose-body: #e5e7eb;
  --tw-prose-headings: #f3f4f6;
  --tw-prose-links: #93c5fd;
}
.card-hover {
  transition: all 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.btn-hover {
  transition: all 0.2s ease;
}
.btn-hover:hover {
  transform: scale(1.02);
}
.animate-delay-100 {
  animation-delay: 0.1s;
}
.animate-delay-200 {
  animation-delay: 0.2s;
}
```

--------------------------------

### Paragraph Styling for Prose

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

Customizes paragraph styles within the 'prose' class, setting text color, font size, line height, and bottom margin. Includes dark mode variations.

```css
/* 段落文本优化 */
.prose p {
  color: #374151; /* gray-700 */
  font-size: 1.05rem;
  line-height: 1.625; /* leading-relaxed */
  margin-bottom: 1rem; /* mb-4 */
}
.dark .prose p {
  color: #d1d5db; /* gray-300 */
}
```

--------------------------------

### List Styling for Prose

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

Customizes unordered and ordered list styles within the 'prose' class, including margins, padding, list style types, and item colors. Includes dark mode variations.

```css
/* 列表优化 */
.prose ul, .prose ol {
  margin-bottom: 1rem; /* mb-4 */
  padding-left: 1.25rem; /* pl-5 */
}
.prose ul {
  list-style-type: disc;
}
.prose ol {
  list-style-type: decimal;
}
.prose li {
  margin-bottom: 0.5rem; /* mb-2 */
  color: #374151; /* gray-700 */
  font-size: 1.05rem;
}
.dark .prose li {
  color: #d1d5db; /* gray-300 */
}
```

--------------------------------

### CSS Custom Variables for Styling

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

Customize LapisCV's appearance by modifying these CSS variables in your style file. Changes may require an application restart.

```css
/* Custom Configs */

/* Basic Configs */
--text-size: 10pt;                      /* Text font size */
--line-height: 1.8;                     /* Text line height */
--avatar-width: 29mm;                   /* Avatar width */

/* Font Configs */
--h1-size: 16pt;                        /* Level 1 heading font size */
--h2-size: 12pt;                        /* Level 2 heading font size */
--h3-size: 10.5pt;                      /* Level 3 heading font size */
--blockquote-size: 9.3pt;               /* Info block font size */

--text-font: 'SourceHanSansCN';         /* Text font */
--title-font: 'SourceHanSerifCN';       /* Title font */
--link-font: 'JetBrainsMono';           /* Link font */
--code-font: 'JetBrainsMono';           /* Code font */

/* Colors */
--color-accent: #4870ac;                /* Theme color */
--text-normal: #353a42;                 /* Text color, change to pure black if printing is needed */
--link-color: #0563c1;                  /* Link color */
```

--------------------------------

### Custom CSS Variables for LapisCV

Source: https://github.com/bingyanstudio/lapiscv/blob/main/README.md

This CSS snippet shows custom variables for styling LapisCV. Modify these to adjust text size, line height, avatar dimensions, heading sizes, fonts, and colors.

```css
/* Custom Configs */

/* Basic Configs */
--text-size: 10pt;                      /* Text font size */
--line-height: 1.8;                     /* Text line height */
--avatar-width: 29mm;                   /* Avatar width */

/* Font Configs */
--h1-size: 16pt;                        /* Level 1 heading font size */
--h2-size: 12pt;                        /* Level 2 heading font size */
--h3-size: 10.5pt;                      /* Level 3 heading font size */
--blockquote-size: 9.3pt;               /* Info block font size */

--text-font: 'SourceHanSansCN';         /* Text font */
--title-font: 'SourceHanSerifCN';       /* Title font */
--link-font: 'JetBrainsMono';           /* Link font */
--code-font: 'JetBrainsMono';           /* Code font */

/* Colors */
--color-accent: #4870ac;                /* Theme color */
--text-normal: #353a42;                 /* Text color, change to pure black if printing is needed */
--link-color: #0563c1;                  /* Link color */

```

--------------------------------

### Code Block Styling for Prose

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

Customizes the appearance of code blocks (pre tags) within the 'prose' class, setting background, padding, border-radius, margin, and overflow. Includes dark mode variations.

```css
/* 代码块优化 */
.prose pre {
  background-color: #eef1f786; /* gray-100 */
  padding: 1rem; /* p-4 */
  border-radius: 0.5rem; /* rounded-lg */
  margin-bottom: 1rem; /* mb-4 */
  overflow-x: auto;
  border: 1px solid rgba(209, 213, 219, 0.5);
}
.dark .prose pre {
  background-color: #1f2937; /* gray-800 */
  border-color: rgba(55, 65, 81, 0.5);
}
```

--------------------------------

### Custom Font Face Declarations

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

CSS @font-face rules to define custom fonts like SourceHanSansCN, SourceHanSerifCN, and JetBrainsMono for use in the theme.

```css
@font-face {
  font-family: "SourceHanSansCN";
  src: local("Source Han Sans CN"), local("Noto Sans SC");
}
@font-face {
  font-family: "SourceHanSerifCN";
  src: local("Source Han Serif CN"), local("Noto Serif SC");
}
@font-face {
  font-family: "JetBrainsMono";
  src: local("JetBrains Mono"), local("Menlo"), local("Monaco");
}
```

--------------------------------

### Inline Code Styling for Prose

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/guide.html

Customizes the appearance of inline code elements (code tags not within pre tags) within the 'prose' class, setting font family, size, background, padding, and border-radius. Includes dark mode variations.

```css
.prose code {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem; /* text-sm */
}
/* 行内代码 */
.prose :not(pre) > code {
  background-color: #eef1f786; /* gray-200 */
  padding: 0.25rem 0.375rem; /* px-1.5 py-0.5 */
  border-radius: 0.25rem;
  font-size: 0.9em;
}
.dark .prose :not(pre) > code {
  background-color: #374151; /* gray-700 */
}
```

--------------------------------

### Animate Elements on Scroll

Source: https://github.com/bingyanstudio/lapiscv/blob/main/docs/index.html

Adds an 'animate-fade-in' class to elements as they scroll into the viewport, creating a fade-in animation effect. This function runs on initial load and on scroll events.

```javascript
// Add animation class to elements when they come into view
const animateOnScroll = () => {
    const elements = document.querySelectorAll(".animate-fade-in");
    elements.forEach((element) => {
        const elementPosition = element.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        if (elementPosition < windowHeight - 100) {
            element.classList.add("animate-fade-in");
        }
    });
};

// Run once on load and then on scroll
window.addEventListener("load", animateOnScroll);
window.addEventListener("scroll", animateOnScroll);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.