### Define post frontmatter Source: https://github.com/saicaca/fuwari/blob/main/README.md Example YAML frontmatter configuration for blog posts. ```yaml --- title: My First Blog Post published: 2023-09-09 description: This is the first post of my new Astro blog. image: ./cover.jpg tags: [Foo, Bar] category: Front-end draft: false lang: jp # Set only if the post's language differs from the site's language in `config.ts` --- ``` -------------------------------- ### Markdown Front Matter with Video Embed Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/video.md Example of front matter in a markdown file that includes metadata and an embedded YouTube video. ```yaml --- title: Include Video in the Post published: 2023-10-19 // ... --- ``` -------------------------------- ### Nested List Algorithm Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/markdown.md An example of a nested list structure representing an algorithm. ```text find wooden spoon uncover pot stir cover pot balance wooden spoon precariously on pot handle wait 10 minutes goto first step (or shut off burner when done) ``` -------------------------------- ### Set Starting Line Number in JavaScript Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Customize the starting line number for a code block by using `startLineNumber`. This is useful for aligning with external references. ```javascript console.log('Greetings from line 5!') console.log('I am on line 6') ``` -------------------------------- ### Expressive Code Blocks - With File Title Source: https://context7.com/saicaca/fuwari/llms.txt Add a title to code blocks to indicate the file name or context. This is useful for organizing code examples. ```typescript export function formatDate(date: Date): string { return date.toLocaleDateString('en-US'); } ``` -------------------------------- ### Expressive Code Blocks - Line Numbers Source: https://context7.com/saicaca/fuwari/llms.txt Display line numbers for code blocks. You can specify the starting line number using `startLineNumber`. ```javascript // Line numbers start at 10 function example() { return true; } ``` -------------------------------- ### Update Draft Status in Frontmatter Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/draft.md Change the 'draft' field from 'true' to 'false' in the Frontmatter to publish an article. This example shows the Frontmatter with the draft status set to false. ```markdown --- title: Draft Example published: 2024-01-11T04:40:26.381Z tags: [Markdown, Blogging, Demo] category: Examples draft: false --- ``` -------------------------------- ### Initialize a new Fuwari project Source: https://github.com/saicaca/fuwari/blob/main/README.md Commands to scaffold a new blog project using various package managers. ```sh npm create fuwari@latest yarn create fuwari pnpm create fuwari@latest bun create fuwari@latest deno run -A npm:create-fuwari@latest ``` -------------------------------- ### Create New Blog Posts Source: https://context7.com/saicaca/fuwari/llms.txt Use the CLI command to generate new Markdown files with pre-filled frontmatter in the content directory. ```bash # Create a new post with the given filename pnpm new-post my-first-post # Creates: src/content/posts/my-first-post.md with this content: # --- # title: my-first-post # published: 2024-01-15 # description: '' # image: '' # tags: [] # category: '' # draft: false # lang: '' # --- # Create a post in a subdirectory (for posts with assets) pnpm new-post guides/getting-started # Creates: src/content/posts/guides/getting-started.md ``` -------------------------------- ### Execute Development and Build Commands Source: https://context7.com/saicaca/fuwari/llms.txt Common CLI commands for managing dependencies, development server, production builds, and code quality. ```bash # Install dependencies pnpm install # Start development server at localhost:4321 pnpm dev # Build production site to ./dist/ pnpm build # Preview production build locally pnpm preview # Create a new blog post pnpm new-post my-post-title # Run code quality checks pnpm check # Format code with Biome pnpm format # Lint code with Biome pnpm lint # Run Astro CLI commands pnpm astro add react # Add integrations pnpm astro check # Type check .astro files ``` -------------------------------- ### Create Admonitions Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/markdown-extended.md Use the admonition syntax to highlight specific types of information like notes or tips. ```markdown :::note Highlights information that users should take into account, even when skimming. ::: :::tip Optional information to help a user be more successful. ::: ``` -------------------------------- ### Configure Post License Source: https://context7.com/saicaca/fuwari/llms.txt Specify the Creative Commons license details for blog posts in src/config.ts. ```typescript // src/config.ts import type { LicenseConfig } from "./types/config"; export const licenseConfig: LicenseConfig = { enable: true, name: "CC BY-NC-SA 4.0", url: "https://creativecommons.org/licenses/by-nc-sa/4.0/", }; ``` -------------------------------- ### Configure Site Metadata and Appearance Source: https://context7.com/saicaca/fuwari/llms.txt Define global site settings such as title, language, theme colors, and banner configuration in src/config.ts. ```typescript // src/config.ts import type { SiteConfig } from "./types/config"; export const siteConfig: SiteConfig = { title: "My Blog", subtitle: "A personal blog about web development", lang: "en", // Supported: 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th', 'vi', 'tr', 'id' themeColor: { hue: 250, // Theme color hue (0-360). Examples: red: 0, teal: 200, cyan: 250, pink: 345 fixed: false, // Set to true to hide the theme color picker from visitors }, banner: { enable: true, src: "assets/images/banner.png", // Relative to /src, or absolute path from /public if starts with '/' position: "center", // 'top', 'center', or 'bottom' credit: { enable: true, text: "Photo by John Doe", url: "https://example.com/photo-source", }, }, toc: { enable: true, // Display table of contents on post pages depth: 2, // Maximum heading depth (1-3) }, favicon: [ { src: "/favicon/icon.png", theme: "light", // Optional: 'light' or 'dark' sizes: "32x32", // Optional }, ], }; ``` -------------------------------- ### Use GitHub-style Admonitions Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/markdown-extended.md Standard GitHub-flavored markdown admonition syntax is also supported. ```markdown > [!NOTE] > The GitHub syntax is also supported. > [!TIP] > The GitHub syntax is also supported. ``` -------------------------------- ### Organize Post Files Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/guide/index.md Place markdown files within the src/content/posts/ directory. Sub-directories can be used to group posts with their associated assets. ```text src/content/posts/ ├── post-1.md └── post-2/ ├── cover.png └── index.md ``` -------------------------------- ### Generate and Compare URLs Source: https://context7.com/saicaca/fuwari/llms.txt Helper functions for creating consistent site URLs and performing path comparisons. ```typescript // src/utils/url-utils.ts usage examples import { getPostUrlBySlug, getTagUrl, getCategoryUrl, url, pathsEqual } from "@utils/url-utils"; // Generate post URL from slug const postUrl = getPostUrlBySlug("my-first-post"); // Returns: "/posts/my-first-post/" // Generate tag archive URL const tagUrl = getTagUrl("Astro"); // Returns: "/archive/?tag=Astro" // Generate category archive URL const categoryUrl = getCategoryUrl("Tutorials"); // Returns: "/archive/?category=Tutorials" // Handle uncategorized posts const uncategorizedUrl = getCategoryUrl(null); // Returns: "/archive/?uncategorized=true" // Prepend base URL to any path const fullUrl = url("/about/"); // Returns: "/about/" (or "/base/about/" if BASE_URL is set) // Compare paths (normalized, case-insensitive) const isMatch = pathsEqual("/posts/", "/Posts"); // Returns: true ``` -------------------------------- ### Define Post Front-matter Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/guide/index.md Use this YAML block at the top of markdown files to define metadata for blog posts. ```yaml --- title: My First Blog Post published: 2023-09-09 description: This is the first post of my new Astro blog. image: ./cover.jpg tags: [Foo, Bar] category: Front-end draft: false --- ``` -------------------------------- ### Retrieve and Organize Blog Posts Source: https://context7.com/saicaca/fuwari/llms.txt Functions for fetching sorted post collections, lightweight lists, and metadata for tags and categories. ```typescript // src/utils/content-utils.ts usage examples import { getSortedPosts, getSortedPostsList, getTagList, getCategoryList } from "@utils/content-utils"; // Get all posts sorted by date (newest first) with prev/next links populated const posts = await getSortedPosts(); // Returns: CollectionEntry<"posts">[] with prevSlug, prevTitle, nextSlug, nextTitle // Get lightweight post list (without body content) for archive pages const postsList = await getSortedPostsList(); // Returns: { slug: string; data: PostData }[] // Get all tags with post counts, sorted alphabetically const tags = await getTagList(); // Returns: { name: string; count: number }[] // Example: [{ name: "Astro", count: 5 }, { name: "Tutorial", count: 3 }] // Get all categories with post counts and URLs const categories = await getCategoryList(); // Returns: { name: string; count: number; url: string }[] // Example: [{ name: "Guides", count: 4, url: "/archive/?category=Guides" }] ``` -------------------------------- ### Basic JavaScript Syntax Highlighting Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md A simple JavaScript code block demonstrating basic syntax highlighting. ```js console.log('This code is syntax highlighted!') ``` -------------------------------- ### Configure Vercel Deployment Source: https://context7.com/saicaca/fuwari/llms.txt Settings for deploying the Astro project to Vercel, including build commands and site URL configuration. ```json // vercel.json { "framework": "astro", "buildCommand": "pnpm build", "outputDirectory": "dist", "installCommand": "pnpm install" } ``` ```javascript // astro.config.mjs - Update for deployment export default defineConfig({ site: "https://your-username.vercel.app/", // Your deployment URL base: "/", // Or "/repo-name/" for GitHub Pages project sites // ... rest of config }); ``` -------------------------------- ### Escaping Forward Slashes in Shell Commands Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Demonstrates escaping forward slashes in a shell command to correctly match file paths. ```sh /\/ho.*\/ echo "Test" > /home/test.txt ``` -------------------------------- ### Manage Theme and Color Settings Source: https://context7.com/saicaca/fuwari/llms.txt Client-side utilities for persisting theme preferences and managing CSS color variables. ```typescript // src/utils/setting-utils.ts usage examples import { getStoredTheme, setTheme, applyThemeToDocument, getHue, setHue, getDefaultHue } from "@utils/setting-utils"; // Get current theme from localStorage const theme = getStoredTheme(); // Returns: "light" | "dark" | "auto" // Set and persist theme preference setTheme("dark"); // Stores in localStorage and applies to document // Apply theme to document (used on page load) applyThemeToDocument("auto"); // Checks system preference if "auto", adds/removes "dark" class // Get current theme hue (for color customization) const hue = getHue(); // Returns: number (0-360) // Set custom theme hue setHue(200); // Teal color // Updates CSS custom property --hue and persists to localStorage // Get default hue from config const defaultHue = getDefaultHue(); // Returns: hue value from siteConfig.themeColor.hue ``` -------------------------------- ### Configure Astro Integrations and Plugins Source: https://context7.com/saicaca/fuwari/llms.txt Main configuration file for Astro, including Tailwind, Svelte, Sitemap, and Expressive Code plugins. ```javascript // astro.config.mjs import { defineConfig } from "astro/config"; import tailwind from "@astrojs/tailwind"; import svelte from "@astrojs/svelte"; import sitemap from "@astrojs/sitemap"; import expressiveCode from "astro-expressive-code"; import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections"; import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers"; export default defineConfig({ site: "https://your-domain.com/", base: "/", trailingSlash: "always", integrations: [ tailwind({ nesting: true }), svelte(), sitemap(), expressiveCode({ themes: ["github-dark"], plugins: [ pluginCollapsibleSections(), pluginLineNumbers(), ], defaultProps: { wrap: true, }, styleOverrides: { codeBackground: "var(--codeblock-bg)", borderRadius: "0.75rem", codeFontSize: "0.875rem", }, }), ], markdown: { remarkPlugins: [ remarkMath, // LaTeX math support remarkDirective, // Directive syntax (:::note, etc.) remarkSectionize, // Wrap sections in
tags ], rehypePlugins: [ rehypeKatex, // Render math as KaTeX rehypeSlug, // Add IDs to headings rehypeAutolinkHeadings, // Add anchor links to headings ], }, }); ``` -------------------------------- ### Configure Author Profile Source: https://context7.com/saicaca/fuwari/llms.txt Set up the sidebar profile information including avatar, bio, and social media links in src/config.ts. ```typescript // src/config.ts import type { ProfileConfig } from "./types/config"; export const profileConfig: ProfileConfig = { avatar: "assets/images/avatar.png", // Relative to /src directory name: "Jane Developer", bio: "Full-stack developer passionate about open source and web technologies.", links: [ { name: "Twitter", icon: "fa6-brands:twitter", // Icon code from https://icones.js.org/ url: "https://twitter.com/username", }, { name: "GitHub", icon: "fa6-brands:github", url: "https://github.com/username", }, { name: "LinkedIn", icon: "fa6-brands:linkedin", url: "https://linkedin.com/in/username", }, { name: "Email", icon: "fa6-solid:envelope", url: "mailto:email@example.com", }, ], }; ``` -------------------------------- ### Run Pre-submission Checks Source: https://github.com/saicaca/fuwari/blob/main/CONTRIBUTING.md Execute these commands to ensure your code is error-free and properly formatted before submitting a pull request. These are typically run using a package manager like pnpm. ```bash pnpm check pnpm format ``` -------------------------------- ### Implement Internationalization (i18n) Source: https://context7.com/saicaca/fuwari/llms.txt Utilities for retrieving translated UI strings based on configured language settings. ```typescript // Using i18n in components import I18nKey from "@i18n/i18nKey"; import { i18n, getTranslation } from "@i18n/translation"; // Get translated string using site's configured language const homeLabel = i18n(I18nKey.home); // "Home" (en) or "ホーム" (ja) const archiveLabel = i18n(I18nKey.archive); // "Archive" or "アーカイブ" const searchLabel = i18n(I18nKey.search); // "Search" or "検索" // Available I18nKey values: // Navigation: home, about, archive, search // Content: tags, categories, recentPosts, comments // Labels: untitled, uncategorized, noTags // Stats: wordCount, wordsCount, minuteCount, minutesCount, postCount, postsCount // Theme: themeColor, lightMode, darkMode, systemMode // Post: more, author, publishedAt, license // Get translation for specific language const jaTranslation = getTranslation("ja"); const label = jaTranslation[I18nKey.home]; // "ホーム" // Supported languages: en, zh_CN, zh_TW, ja, ko, es, th, vi, id, tr ``` -------------------------------- ### Post Frontmatter Schema Source: https://context7.com/saicaca/fuwari/llms.txt Define blog post metadata using YAML frontmatter. Supported fields include title, published date, description, image, tags, category, draft status, and language. ```yaml --- title: Building a Modern Blog with Astro published: 2024-01-15 updated: 2024-01-20 # Optional: last update date description: Learn how to create a fast, modern blog using Astro and Fuwari. image: ./cover.jpg # Cover image (relative to post, /public, or URL) tags: [Astro, Web Development, Tutorial] category: Tutorials draft: false # Set to true to hide in production lang: ja # Optional: override site language for this post --- # Your markdown content here... ``` -------------------------------- ### Combining Syntax Highlighting with Diff Syntax Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Combines JavaScript syntax highlighting with diff markers to show changes within JavaScript code. ```diff function thisIsJavaScript() { // This entire block gets highlighted as JavaScript, // and we can still add diff markers to it! - console.log('Old code to be removed') + console.log('New and shiny code!') } ``` -------------------------------- ### Configure Navigation Links Source: https://context7.com/saicaca/fuwari/llms.txt Define the navigation bar structure using built-in presets or custom external links in src/config.ts. ```typescript // src/config.ts import { LinkPreset, type NavBarConfig } from "./types/config"; export const navBarConfig: NavBarConfig = { links: [ LinkPreset.Home, // Built-in link to homepage LinkPreset.Archive, // Built-in link to archive page LinkPreset.About, // Built-in link to about page { name: "GitHub", url: "https://github.com/username/repo", external: true, // Opens in new tab with external link icon }, { name: "Projects", url: "/projects/", // Internal links don't need base path external: false, }, ], }; ``` -------------------------------- ### Implement RSS Feed Generation in Astro Source: https://context7.com/saicaca/fuwari/llms.txt Generates an RSS feed at /rss.xml using the @astrojs/rss package. Requires sorted post data and site configuration. ```typescript // src/pages/rss.xml.ts - RSS endpoint implementation import rss from "@astrojs/rss"; import { getSortedPosts } from "@utils/content-utils"; import { siteConfig } from "@/config"; import type { APIContext } from "astro"; export async function GET(context: APIContext) { const posts = await getSortedPosts(); return rss({ title: siteConfig.title, description: siteConfig.subtitle || "No description", site: context.site ?? "https://example.com", items: posts.map((post) => ({ title: post.data.title, pubDate: post.data.published, description: post.data.description || "", link: `/posts/${post.slug}/`, content: post.body, // Full post content included })), customData: `${siteConfig.lang}`, }); } // Access the feed at: https://your-site.com/rss.xml ``` -------------------------------- ### Add Spoilers Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/markdown-extended.md Use the spoiler syntax to hide content until the user interacts with it. ```markdown The content :spoiler[is hidden **ayyy**]! ``` -------------------------------- ### GitHub Repository Cards Source: https://context7.com/saicaca/fuwari/llms.txt Embed dynamic GitHub repository cards that fetch live data from the GitHub API. Supports basic and multiple card embedding. ```markdown ::github{repo="saicaca/fuwari"} ::github{repo="withastro/astro"} ::github{repo="tailwindlabs/tailwindcss"} ``` -------------------------------- ### Embed GitHub Repository Card Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/markdown-extended.md Use the github component to display dynamic repository information by providing the owner and repository name. ```markdown ::github{repo="saicaca/fuwari"} ``` -------------------------------- ### Using Diff-Like Syntax for Inserted and Deleted Lines Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Applies diff-like syntax to mark lines as inserted or deleted within a code block. ```diff +this line will be marked as inserted -this line will be marked as deleted this is a regular line ``` -------------------------------- ### Create Admonitions with Custom Titles Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/markdown-extended.md Customize the title of an admonition by adding text inside square brackets after the admonition type. ```markdown :::note[MY CUSTOM TITLE] This is a note with a custom title. ::: ``` -------------------------------- ### Adding Labels to Line Markers Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Demonstrates adding labels to line markers for deleted, inserted, and default types within a JSX code block. ```jsx // labeled-line-markers.jsx ``` -------------------------------- ### Expressive Code Blocks - Basic Highlighting Source: https://context7.com/saicaca/fuwari/llms.txt Basic syntax highlighting for code blocks using Expressive Code. Ensure the language identifier is correctly specified. ```javascript console.log('Hello, Fuwari!'); ``` -------------------------------- ### Actual Diff File Representation Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Represents an actual diff file content, showing added and unmodified lines. ```diff --- +++ b/README.md @@ -1,3 +1,4 @@ +this is an actual diff file -all contents will remain unmodified no whitespace will be removed either ``` -------------------------------- ### Display Line Numbers in JavaScript Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Enable line numbers for a code block using `showLineNumbers`. This helps in referencing specific lines of code. ```javascript // This code block will show line numbers console.log('Greetings from line 2!') console.log('I am on line 3') ``` -------------------------------- ### Marking Full Lines and Ranges in JavaScript Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Highlights specific lines and ranges within a JavaScript code block using line number and range selectors. ```js // Line 1 - targeted by line number // Line 2 // Line 3 // Line 4 - targeted by line number // Line 5 // Line 6 // Line 7 - targeted by range "7-8" // Line 8 - targeted by range "7-8" ``` -------------------------------- ### Expressive Code Blocks - Insert/Delete Markers Source: https://context7.com/saicaca/fuwari/llms.txt Use insert and delete markers to visually represent changes in code, similar to a diff view. Specify deleted lines with `del` and inserted lines with `ins`. ```javascript function greet(name) { console.log('Hello'); // deleted console.log(`Hello, ${name}!`); // inserted return name; // inserted } ``` -------------------------------- ### Markdown Admonitions Source: https://context7.com/saicaca/fuwari/llms.txt Use GitHub-style and custom admonitions for callouts in markdown. Available types include note, tip, important, warning, and caution. Custom titles are also supported. ```markdown :::note This is important information users should be aware of. ::: :::tip A helpful suggestion to improve the user experience. ::: :::warning Critical information about potential issues or risks. ::: :::caution Describes negative consequences of an action. ::: :::important[Custom Title Here] Crucial information with a custom heading. ::: > [!NOTE] > GitHub-style admonition syntax is also supported. > [!TIP] > This renders identically to the triple-colon syntax. > [!WARNING] > Use this for important warnings in your documentation. ``` -------------------------------- ### Configure Word Wrap in JavaScript Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Enable word wrapping for long lines in code blocks. By default, word wrap is enabled. ```javascript // Example with wrap function getLongString() { return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' } ``` -------------------------------- ### Configure Collapsible Sections in JavaScript Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Control which lines of a code block are collapsed by default using the `collapse` option. Specify line ranges to hide. ```javascript // All this boilerplate setup code will be collapsed import { someBoilerplateEngine } from '@example/some-boilerplate' import { evenMoreBoilerplate } from '@example/even-more-boilerplate' const engine = someBoilerplateEngine(evenMoreBoilerplate()) // This part of the code will be visible by default engine.doSomething(1, 2, 3, calcFn) function calcFn() { // You can have multiple collapsed sections const a = 1 const b = 2 const c = a + b // This will remain visible console.log(`Calculation result: ${a} + ${b} = ${c}`) return c } // All this code until the end of the block will be collapsed again engine.closeConnection() engine.freeMemory() engine.shutdown({ reason: 'End of example boilerplate code' }) ``` -------------------------------- ### Syntax Highlighted Python Block Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/markdown.md A delimited code block marked for Python syntax highlighting. ```python import time # Quick, count to ten! for i in range(10): # (but not *too* quick) time.sleep(0.5) print i ``` -------------------------------- ### HTML Code Block with Comment Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md An HTML code block with a comment indicating its source file path. ```html
File name comment example
``` -------------------------------- ### Basic Bash Terminal Frame Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md A simple bash command displayed within a terminal frame without a title. ```bash echo "This terminal frame has no title" ``` -------------------------------- ### Expressive Code Blocks - Terminal Frame Source: https://context7.com/saicaca/fuwari/llms.txt Display code blocks within a terminal frame, suitable for showing command-line operations. Includes a title for context. ```bash pnpm install pnpm dev ``` -------------------------------- ### Selecting Line Marker Types (Mark, Ins, Del) Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Applies different marker types (deleted, inserted, default) to specific lines within a JavaScript code block. ```js function demo() { console.log('this line is marked as deleted') // This line and the next one are marked as inserted console.log('this is the second inserted line') return 'this line uses the neutral default marker type' } ``` -------------------------------- ### Overriding Frame Type to None Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Demonstrates disabling the frame for a shell script, showing code without any frame decorations. ```sh echo "Look ma, no frame!" ``` -------------------------------- ### Adding Long Labels on Separate Lines for Line Markers Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Shows how to add descriptive, multi-line labels to line markers in a JSX code block, improving clarity for complex changes. ```jsx // labeled-line-markers.jsx ``` -------------------------------- ### PowerShell Terminal Frame with Title Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md A PowerShell command within a terminal frame, featuring a title. ```powershell Write-Output "This one has a title!" ``` -------------------------------- ### Expressive Code Blocks - Collapsible Sections Source: https://context7.com/saicaca/fuwari/llms.txt Create collapsible sections within code blocks to hide less critical parts of the code by default. Specify collapsed lines using `collapse`. ```javascript // These lines (1-5) are collapsed by default import { foo } from 'foo'; import { bar } from 'bar'; import { baz } from 'baz'; const config = { /* ... */ }; // This section is visible function main() { console.log('Main logic here'); } // These lines (12-15) are also collapsed export { main }; export default main; // End of file ``` -------------------------------- ### Marking Text with Regular Expressions Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Uses a regular expression to highlight specific words within a TypeScript code block. ```ts /ye[sp]/ console.log('The words yes and yep will be marked.') ``` -------------------------------- ### Expressive Code Blocks - Line Highlighting Source: https://context7.com/saicaca/fuwari/llms.txt Highlight specific lines or ranges of lines within a code block to draw attention to important parts of the code. Specify lines using comma-separated numbers or ranges. ```javascript // Line 1 - highlighted const a = 1; const b = 2; // Line 4 - highlighted const c = 3; const d = 4; // Lines 7-8 - highlighted const e = 5; ``` -------------------------------- ### Code Editor Frame with Title Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Displays a JavaScript code block within a code editor frame, including a title attribute. ```js console.log('Title attribute example') ``` -------------------------------- ### Expressive Code Blocks - Inline Text Markers Source: https://context7.com/saicaca/fuwari/llms.txt Mark specific inline text within code blocks as 'important', 'added', or 'removed'. This is useful for highlighting specific terms or variables. ```javascript const important = true; // 'important' is marked const added = 'new'; // 'added' is marked as inserted const removed = 'old'; // 'removed' is marked as deleted ``` -------------------------------- ### ANSI Escape Sequence Rendering Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Renders text with ANSI escape sequences for colors and formatting, useful for terminal output simulation. ```ansi ANSI colors: - Regular: Red Green Yellow Blue Magenta Cyan - Bold: Red Green Yellow Blue Magenta Cyan - Dimmed: Red Green Yellow Blue Magenta Cyan 256 colors (showing colors 160-177): 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 Full RGB colors: ForestGreen - RGB(34, 139, 34) Text formatting: Bold Dimmed Italic Underline ``` -------------------------------- ### Embed YouTube Video Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/video.md Use this iframe code to embed a YouTube video. Ensure the src attribute points to the correct YouTube video URL. ```html ``` ```html ``` -------------------------------- ### Indented Code Block Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/markdown.md A simple code block created by indenting lines with 4 spaces. ```text # Let me re-iterate ... for i in 1 .. 10 { do-something(i) } ``` -------------------------------- ### Marking Individual Text within Lines Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Highlights specific text occurrences within lines of a JavaScript code block. ```js function demo() { // Mark any given text inside lines return 'Multiple matches of the given text are supported'; } ``` -------------------------------- ### Spoiler Text Source: https://context7.com/saicaca/fuwari/llms.txt Hide text with reveal-on-hover spoilers that support Markdown formatting. Useful for sensitive information or answers. ```markdown The secret answer is :spoiler[42]. The winner is :spoiler[**John Doe**]! Character A is :spoiler[the hero] and Character B is :spoiler[the villain]. ``` -------------------------------- ### Selecting Inline Marker Types (Mark, Ins, Del) Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Applies inline marker types (inserted, deleted) to specific text within a JavaScript code block. ```js function demo() { console.log('These are inserted and deleted marker types'); // The return statement uses the default marker type return true; } ``` -------------------------------- ### Delimited Code Block Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/markdown.md A code block using triple backticks for easier copying and pasting. ```text define foobar() { print "Welcome to flavor country!"; } ``` -------------------------------- ### Embed Bilibili Video Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/video.md This iframe code is used to embed videos from Bilibili. Adjust the src attribute for different videos or playback options. ```html ``` -------------------------------- ### Expressive Code Blocks - Word Wrap Source: https://context7.com/saicaca/fuwari/llms.txt Enable word wrapping for code blocks to prevent horizontal scrolling, especially for long lines of text. Use the `wrap` directive. ```javascript const longString = 'This is a very long string that will wrap to the next line instead of requiring horizontal scrolling'; ``` -------------------------------- ### Preserve Indentation with Word Wrap in JavaScript Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md When word wrapping is enabled, `preserveIndent` (enabled by default) maintains the original indentation of wrapped lines. This ensures code readability. ```javascript // Example with preserveIndent (enabled by default) function getLongString() { return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' } ``` -------------------------------- ### Disable Word Wrap in JavaScript Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Explicitly disable word wrapping for a code block by setting `wrap=false`. This is useful for code where line breaks are significant. ```javascript // Example with wrap=false function getLongString() { return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' } ``` -------------------------------- ### Disable Line Numbers in JavaScript Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Explicitly disable line numbers for a code block by setting `showLineNumbers=false`. This is useful when line numbers are not desired. ```javascript // Line numbers are disabled for this block console.log('Hello?') console.log('Sorry, do you know what line I am on?') ``` -------------------------------- ### Overriding Frame Type to Code Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Overrides the default terminal frame to a code frame for a PowerShell script, useful for displaying code snippets within a terminal context. ```ps # Without overriding, this would be a terminal frame function Watch-Tail { Get-Content -Tail 20 -Wait $args } New-Alias tail Watch-Tail ``` -------------------------------- ### Disable Indentation Preservation with Word Wrap in JavaScript Source: https://github.com/saicaca/fuwari/blob/main/src/content/posts/expressive-code.md Disable the preservation of indentation for wrapped lines by setting `preserveIndent=false`. This can be useful in specific layout scenarios. ```javascript // Example with preserveIndent=false function getLongString() { return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.