### Configuring GitHub Sync with GitBook YAML Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/integrations.md Example of a .gitbook.yaml file used for advanced GitBook-GitHub synchronization. It specifies the root documentation directory, maps README and SUMMARY files, and defines redirects for old URLs. ```YAML # .gitbook.yaml root: ./docs/ structure: readme: README.md summary: SUMMARY.md redirects: old-page: new-page.md legacy/path: new/path.md ``` -------------------------------- ### Comprehensive GitBook Frontmatter Example (YAML) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/covers-and-icons.md A complete example showcasing the combination of 'cover', 'coverY', 'description', and the 'layout' block in YAML frontmatter. It provides a realistic scenario for configuring a page with a cover image, description, and detailed control over the visibility and appearance of page elements like the cover (full size), title, description, TOC (max depth 3), outline, and pagination. ```YAML cover: ../.gitbook/assets/api-cover.png coverY: 40 description: Complete guide to our REST API authentication methods layout: cover: visible: true size: full title: visible: true description: visible: true tableOfContents: visible: true maxDepth: 3 outline: visible: true pagination: visible: true ``` -------------------------------- ### Fetching GitBook Spaces using API Javascript Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/integrations.md JavaScript example showing how to make a GET request to the Git GitBook API's /v1/spaces endpoint. It uses the Fetch API and requires an API token passed in the Authorization header. ```JavaScript // Fetch all spaces fetch('https://api.gitbook.com/v1/spaces', { method: 'GET', headers: { 'Authorization': 'Bearer YOUR_API_TOKEN', 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => console.log(data)); ``` -------------------------------- ### Logging String for Output Example (JavaScript, GitBook) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/code-snippets.md A very concise JavaScript snippet that simply logs a string to the console. This code is provided as the example snippet to pair with a blockquote, demonstrating how to effectively show code alongside its corresponding output in GitBook documentation. ```javascript console.log("Hello, world!"); ``` -------------------------------- ### Executing Terminal Commands (Bash) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/code-snippets.md This snippet provides examples of common terminal commands, specifically `npm install` and `npm run dev`. It demonstrates how to format shell commands using the `bash` language identifier for appropriate syntax highlighting in a GitBook code block. ```bash # Install dependencies npm install # Start development server npm run dev ``` -------------------------------- ### Configuring GitBook Sync with YAML Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/gitbook-setup/setting-up-gitbook.md This YAML configuration snippet shows an example of a `.gitbook.yaml` file used when syncing a GitBook space with a GitHub repository. It defines the content root directory, the structure of the book (specifying the README and SUMMARY files), and sets up redirects for old page paths. This file is crucial for controlling how GitBook processes files from the linked repository. ```YAML # Example .gitbook.yaml configuration file root: ./docs/ structure: readme: README.md summary: SUMMARY.md redirects: previous/page: new-folder/page.md ``` -------------------------------- ### Creating User Data cURL Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/api-documentation.md Example cURL command for sending a POST request to create a new user. It includes setting the Authorization and Content-Type headers and sending JSON data in the request body. This demonstrates how to send complex data for resource creation. ```bash curl -X POST "https://api.example.com/users" \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "name": "Jane Smith", "email": "jane@example.com" }' ``` -------------------------------- ### Flowchart Example: Documentation Process in Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Provides a comprehensive example of a flowchart depicting a typical documentation workflow using 'graph TD'. It combines different node types and decision points to illustrate a multi-step process. ```Mermaid graph TD A[Start Documentation] --> B{Existing Content?} B -- Yes --> C[Review & Update] B -- No --> D[Create Content] C --> E[Add Diagrams] D --> E E --> F[Technical Review] F --> G{Changes Needed?} G -- Yes --> E G -- No --> H[Publish] H --> I[Gather Feedback] I --> J{Improvements?} J -- Yes --> C J -- No --> K[Documentation Complete] ``` -------------------------------- ### Retrieving User Data cURL Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/api-documentation.md Provides a cURL command example for making a GET request to retrieve user information. It includes specifying path and query parameters, and requires an Authorization header with a Bearer token. The command fetches data for a specific user ID. ```bash curl -X GET "https://api.example.com/users/123?fields=full" \ -H "Authorization: Bearer YOUR_API_KEY" ``` -------------------------------- ### GitBook Webhook Payload Example JSON Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/integrations.md Sample JSON structure representing a payload sent by GitBook to a configured webhook URL. It includes details about the event type, the affected space and page, the user who triggered the event, and a timestamp. ```JSON { "event": "page.update", "space": { "id": "space-id", "name": "Space Name" }, "page": { "id": "page-id", "title": "Page Title", "path": "/path/to/page" }, "user": { "id": "user-id", "name": "User Name" }, "timestamp": "2023-05-12T15:30:45Z" } ``` -------------------------------- ### Creating User Data Python Requests Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/api-documentation.md Provides a Python example using the requests library to send a POST request for creating a user. It illustrates setting request headers, including authorization and content type, and sending user data as a Python dictionary which is automatically converted to JSON. This is a common approach in Python backend or scripting tasks. ```python import requests url = "https://api.example.com/users" headers = { "Authorization": "Bearer YOUR_API_KEY", "Content-Type": "application/json" } data = { "name": "Jane Smith", "email": "jane@example.com" } response = requests.post(url, headers=headers, json=data) print(response.json()) ``` -------------------------------- ### Creating Headings (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Demonstrates how to create headings using hash symbols (#) in Markdown. In GitBook, # Heading 1 is typically reserved for the page title, so content usually starts from Heading 2. ```markdown # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 ``` -------------------------------- ### Displaying JavaScript Code in GitBook (JavaScript) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/README.md This simple JavaScript snippet is used as an example within the GitBook documentation to show how code blocks are rendered with syntax highlighting and optional features like titles, line numbers, and overflow control using the {% code %} block. Dependencies: GitBook platform. ```javascript function sayHello() { console.log("Hello, GitBook!"); } ``` -------------------------------- ### Highlighting JavaScript HelloWorld Function Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/code-snippets.md This JavaScript snippet is identical to the basic example but is used here to specifically illustrate how providing a language identifier (`javascript`) after the triple backticks enables syntax highlighting within the GitBook code block. ```javascript function helloWorld() { console.log("Hello, world!"); } ``` -------------------------------- ### Implementing Simple Express App (JavaScript) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/code-snippets.md This snippet presents a basic Express.js web application that listens on port 3000. It serves as an example demonstrating how to include a file name ('app.js') using the `title` attribute in a GitBook code block. ```javascript const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(3000, () => { console.log('Server running on port 3000'); }); ``` -------------------------------- ### Making GitBook API Request with Access Token - JavaScript Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/gitbook-setup/account-configuration.md This snippet demonstrates how to use a GitBook access token to authenticate an API request. It shows a simple GET request to list spaces, including setting the 'Authorization' header with the 'Bearer' token. Replace 'YOUR_ACCESS_TOKEN' with your actual generated token. ```javascript fetch('https://api.gitbook.com/v1/spaces', { method: 'GET', headers: { 'Authorization': 'Bearer YOUR_ACCESS_TOKEN', 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => console.log(data)); ``` -------------------------------- ### Authenticating with API Key Query Parameter cURL Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/api-documentation.md Illustrates how to authenticate API requests by including an API key directly in the query string parameters. This cURL example appends the api_key parameter to the endpoint URL. Note this method is less secure than using headers. ```bash curl -X GET "https://api.example.com/endpoint?api_key=YOUR_API_KEY" ``` -------------------------------- ### Logging String (JavaScript, Default GitBook) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/code-snippets.md A straightforward JavaScript snippet that declares a variable and logs it to the console. This example shows a simple GitBook code block using only the `title` parameter, demonstrating default settings without explicit line numbers or overflow wrap. ```javascript const greeting = "Hello, world!"; console.log(greeting); ``` -------------------------------- ### Styling Flowchart Line Styles in Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Illustrates different connection line and arrow styles available for flowchart diagrams in Mermaid using 'graph LR'. Examples include plain arrows, arrows with text labels, dotted lines, and thick lines. ```Mermaid graph LR A -- Text --> B C -->|Text| D E -.-> F G -.Text.-> H I ==> J K ==Text==> L ``` -------------------------------- ### Referencing Image Alongside Content Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Illustrates referencing an image stored in a subdirectory alongside the Markdown file that uses it. This approach uses a relative path starting with './' to indicate the current directory, useful for organizing images close to relevant content. ```Markdown ![Setup screen](./images/setup-screen.png) ``` -------------------------------- ### Sizing Image with CSS Style Attribute Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Explains how to use inline CSS styles within the 'style' attribute of an '' tag to control image size. This example sets the width relative to its container (50%) while also enforcing a maximum width in pixels, offering more flexible control than HTML attributes alone. ```CSS Description ``` -------------------------------- ### Creating Basic Tables (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Demonstrates the basic syntax for creating a simple table with headers, a separator line using hyphens and pipes, and rows of content using pipes to separate columns. ```markdown | Header 1 | Header 2 | Header 3 | |----------|----------|----------| | Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 | | Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 | ``` -------------------------------- ### Creating GitBook Hints/Callouts (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Shows how to create special colored hint or callout blocks in GitBook using the {% hint style="..." %} syntax, with styles like info, warning, danger, and success to highlight important information. ```markdown {% hint style="info" %} This is an informational hint. {% endhint %} {% hint style="warning" %} This is a warning. {% endhint %} {% hint style="danger" %} This is a dangerous warning. {% endhint %} {% hint style="success" %} This indicates success or a tip. {% endhint %} ``` -------------------------------- ### Creating Ordered Lists (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Demonstrates how to create ordered lists using numbers followed by a period and a space. Nesting is achieved by indenting, similar to unordered lists. ```markdown 1. First item 2. Second item 1. Subitem 2.1 2. Subitem 2.2 3. Third item ``` -------------------------------- ### Creating Basic HelloWorld Function (JavaScript) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/code-snippets.md This snippet demonstrates a fundamental JavaScript function that prints 'Hello, world!' to the console. It is used to show the basic structure of a GitBook code block including title and line numbers parameters. ```javascript function helloWorld() { console.log("Hello, world!"); } ``` -------------------------------- ### Creating Unordered Lists (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Illustrates how to create unordered lists using -, *, or + symbols followed by a space, including nesting items by indenting, in Markdown. ```markdown - Item 1 - Item 2 - Subitem 2.1 - Subitem 2.2 - Item 3 ``` -------------------------------- ### Adding Cover Image and Description in GitBook Frontmatter (YAML) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/covers-and-icons.md Demonstrates how to add a cover image using the 'cover' property (specifying the image path), control its vertical position with 'coverY' (0 is top), and provide a page summary using the 'description' property in YAML frontmatter. ```YAML cover: ../.gitbook/assets/cover-image.png coverY: 0 description: A concise description of what this page contains and its purpose. ``` -------------------------------- ### Creating User Data JavaScript Fetch Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/api-documentation.md Demonstrates how to perform a POST request using JavaScript's Fetch API to create a user. It shows setting headers, including the authorization token and content type, and sending the user data as a JSON string in the request body. This is suitable for browser-based or Node.js applications. ```javascript fetch('https://api.example.com/users', { method: 'POST', headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Jane Smith', email: 'jane@example.com' }) }) .then(response => response.json()) .then(data => console.log(data)); ``` -------------------------------- ### Creating Image Gallery with GitBook Tabs Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Demonstrates creating a simple image gallery using GitBook's custom tabs syntax. Each tab can contain an image, allowing users to switch between multiple images within a single block of content. This syntax is specific to GitBook's rendering engine. ```GitBook Syntax {% tabs %} {% tab title="Screenshot 1" %} ![First screenshot](./images/screen1.png) {% endtab %} {% tab title="Screenshot 2" %} ![Second screenshot](./images/screen2.png) {% endtab %} {% endtabs %} ``` -------------------------------- ### Creating a Pie Chart with Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Illustrates how to display data distribution using the 'pie' directive. Each slice is defined with a label and a numerical value representing its proportion of the total. ```Mermaid pie title Distribution "Category A" : 42.4 "Category B" : 30.1 "Category C" : 27.5 ``` -------------------------------- ### Basic Page Frontmatter Configuration (YAML) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/README.md This YAML snippet illustrates the basic frontmatter block used at the top of a GitBook page file. It configures metadata such as the page description, cover image path, cover position, and an icon, enclosed within --- delimiters. Dependencies: GitBook platform, YAML syntax. ```yaml --- description: Page description cover: ./assets/cover-image.png coverY: 0 icon: star --- ``` -------------------------------- ### Creating GitBook Content Tabs (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Demonstrates how to create tabbed content blocks in GitBook using the {% tabs %} and {% tab title="..." %} syntax. This is useful for presenting alternative content versions, like code snippets in different languages. ```markdown {% tabs %} {% tab title="First Tab" %} Content of the first tab {% endtab %} {% tab title="Second Tab" %} Content of the second tab {% endtab %} {% endtabs %} ``` -------------------------------- ### Applying Text Emphasis (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Shows different ways to apply emphasis like italics, bold, and strikethrough using *, _, **, __, and ~~ symbols in Markdown. Combinations like bold and italic are also shown. ```markdown *Italic text* or _Italic text_ **Bold text** or __Bold text__ ***Bold and italic text*** or ___Bold and italic text___ ~~Strikethrough text~~ ``` -------------------------------- ### Configuring Advanced Layout Options in GitBook Frontmatter (YAML) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/covers-and-icons.md Illustrates how to use the 'layout' block in YAML frontmatter to customize page presentation. It allows controlling the visibility and size ('hero', 'full', 'partial') of the cover, and the visibility and depth ('maxDepth') of elements like title, description, table of contents, outline, and pagination. ```YAML layout: cover: visible: true size: hero # Options: hero, full, partial title: visible: true description: visible: true tableOfContents: visible: true maxDepth: 3 outline: visible: true pagination: visible: true ``` -------------------------------- ### Using Reference-Style Links (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Explains how to define link URLs separately using reference labels (e.g., [ref1]: URL) and then link to them in the text using the label (e.g., [link text][ref1]). This can improve readability for documents with many repeated links. ```markdown [reference link][ref1] [ref1]: https://www.example.com ``` -------------------------------- ### Advanced Page Layout Configuration (YAML) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/README.md This YAML snippet expands upon basic frontmatter, showing how to configure detailed layout options for a GitBook page. It includes visibility and sizing settings for elements like the cover, title, description, table of contents, outline, and pagination. Dependencies: GitBook platform, YAML syntax. ```yaml --- cover: ./assets/cover-image.png coverY: 0 icon: star description: Page description layout: cover: visible: true size: hero # Options: hero, full, partial title: visible: true description: visible: true tableOfContents: visible: true maxDepth: 3 outline: visible: true pagination: visible: true --- ``` -------------------------------- ### Creating Blockquotes (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Illustrates how to create blockquotes using the > symbol at the beginning of lines. Blockquotes can span multiple paragraphs and can also be nested using additional > symbols. ```markdown > This is a blockquote. > > It can span multiple paragraphs. > > > And can be nested. ``` -------------------------------- ### Using HTML Details/Summary in Markdown (HTML/Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Illustrates how to use HTML
and tags within Markdown to create collapsible content sections. The summary text is visible, and clicking it reveals the content inside the details tag. ```html
Click to expand This content is hidden by default but can be expanded.
``` -------------------------------- ### Basic Flowchart Structure in Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Demonstrates the basic syntax for creating a flowchart in Mermaid using the 'graph' directive. It shows nodes defined with square brackets and connections with arrows, illustrating a simple process flow. ```Mermaid graph TD A[Start] --> B{Decision} B -- Yes --> C[Action 1] B -- No --> D[Action 2] ``` -------------------------------- ### Creating a Gantt Chart with Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Shows how to create a project timeline chart using the 'gantt' directive. It includes defining the date format, sections, and tasks with their status ('done', 'active') and timeframes. ```Mermaid gantt title Project Timeline dateFormat YYYY-MM-DD section Planning Requirements :done, req, 2023-01-01, 2023-01-10 Design :active, des, 2023-01-11, 2023-01-20 section Development Implementation : imp, 2023-01-21, 2023-02-15 Testing : test, 2023-02-16, 2023-02-28 ``` -------------------------------- ### Inserting Animated GIF with Markdown Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Illustrates adding an animated GIF image using basic Markdown. GIFs are useful for short demonstrations or animations and are referenced here using a relative path. ```Markdown ![Demo](./demos/how-to-use.gif) ``` -------------------------------- ### Defining GitBook Navigation Structure with SUMMARY.md (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/gitbook-structure/routing.md This Markdown snippet illustrates how the SUMMARY.md file defines the hierarchical navigation structure for a GitBook, mapping page titles to file paths and influencing the resulting URL structure based on the file system location. ```markdown # Table of contents * [Introduction](README.md) ## Getting Started * [Installation](getting-started/installation.md) * [Configuration](getting-started/configuration.md) ## Advanced Topics * [Customization](advanced/customization.md) * [Themes](advanced/customization/themes.md) * [Plugins](advanced/customization/plugins.md) ``` -------------------------------- ### Creating a State Diagram with Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Demonstrates how to visualize state transitions using the 'stateDiagram-v2' directive. It shows states, the initial/final state ('[*]'), and transitions labeled with trigger events. ```Mermaid stateDiagram-v2 [*] --> Idle Idle --> Processing: Submit Processing --> Success: Complete Processing --> Error: Fail Success --> [*] Error --> Idle: Retry ``` -------------------------------- ### Embedding External Content (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Demonstrates how to embed various external content types like YouTube videos, CodePen pens, and GitHub Gists directly into your GitBook page using the {% embed url="..." %} syntax. ```markdown {% embed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" %} {% embed url="https://codepen.io/username/pen/penid" %} {% embed url="https://gist.github.com/username/gistid" %} ``` -------------------------------- ### Defining GitBook Navigation with SUMMARY.md (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/README.md This Markdown snippet demonstrates how to structure the navigation sidebar for a GitBook using the SUMMARY.md file. It uses standard Markdown links and headings to create a hierarchical table of contents linking to the corresponding files. Dependencies: GitBook platform structure. ```markdown # Table of contents * [ROOT](README.md) * [Introduction](introduction/README.md) * [Getting Started](getting-started/README.md) * [Installation](getting-started/installation.md) * [Configuration](getting-started/configuration.md) ## Advanced Topics * [Advanced](advanced/README.md) * [Customization](advanced/customization/README.md) * [Themes](advanced/customization/themes.md) * [Plugins](advanced/customization/plugins.md) ``` -------------------------------- ### Adding Page Icon using GitBook Frontmatter (YAML) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/covers-and-icons.md Shows how to specify a page icon using the 'icon' property in the YAML frontmatter. GitBook supports various icon sets; the value should be the icon name (e.g., 'calendar-week'). This enhances visual navigation. ```YAML icon: calendar-week ``` -------------------------------- ### Showing GitBook Code Block Syntax (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/code-snippets.md This snippet shows the raw Markdown syntax required to create a customized code block in GitBook. It includes the {% code %} tag with various parameters and the nested Markdown code block syntax for the actual code content. ```markdown {% code title="filename / description" overflow="wrap" lineNumbers="true" %} ```javascript function helloWorld() { console.log("Hello, world!"); } ``` {% endcode %} ``` -------------------------------- ### Inserting Basic Image with Markdown Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Demonstrates the simplest way to add an image to GitBook documentation using standard Markdown image syntax. Requires an image file accessible via a relative or absolute path. The 'Alt text' is crucial for accessibility and is displayed if the image cannot be loaded. ```Markdown ![Alt text](path/to/image.png) ``` -------------------------------- ### Creating Links (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Explains how to create inline links to external URLs or internal pages using the [Link text](URL) syntax. An optional title attribute can be added for hover text using quotes after the URL. ```markdown [Link text](URL) [Link to another page](./another-page.md) [Link with title](https://www.example.com "Title when hovering") ``` -------------------------------- ### Authenticating with Bearer Token cURL Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/advanced-features/api-documentation.md Shows a cURL command demonstrating the use of a Bearer token for API authentication. The token is passed in the Authorization request header. This is a standard method for token-based authentication. ```bash curl -X GET "https://api.example.com/endpoint" \ -H "Authorization: Bearer YOUR_API_TOKEN" ``` -------------------------------- ### Embedding a Mermaid Flowchart (Mermaid) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/README.md This snippet shows the Mermaid syntax for defining a simple flowchart. It demonstrates GitBook's support for rendering diagrams directly from text descriptions within a code block fenced with ```mermaid```. Dependencies: GitBook platform, Mermaid library support. ```mermaid graph TD A[Start] --> B{Is it working?} B -- Yes --> C[Great!] B -- No --> D[Troubleshoot] D --> B ``` -------------------------------- ### Sizing Image with HTML Attributes Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Shows how to control the display size of an image directly using standard HTML 'width' and 'height' attributes within the '' tag. This method specifies the dimensions in pixels and can be used within a Markdown context. ```HTML Description ``` -------------------------------- ### Configuring Custom GitBook Redirects in .gitbook.yaml (YAML) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/gitbook-structure/routing.md This YAML snippet shows how to configure custom redirects in the .gitbook.yaml file. Redirects are used to map old URL paths to new file paths, ensuring backward compatibility and preventing broken links after restructuring content. ```yaml # In .gitbook.yaml redirects: old/url: new-folder/new-page.md legacy/api-docs: api/v2/overview.md ``` -------------------------------- ### Making Image Responsive with CSS Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Provides CSS styling within an inline 'style' attribute to make an image responsive. Setting 'max-width: 100%' ensures the image doesn't overflow its container, and 'height: auto' maintains the aspect ratio, allowing the image to scale down gracefully on smaller screens. ```CSS Description ``` -------------------------------- ### Creating a Class Diagram with Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Illustrates how to model classes and their relationships using the 'classDiagram' directive. Class properties and methods are defined, and inheritance is shown using '<|--'. ```Mermaid classDiagram class User { +String username +String email +login() +logout() } class Admin { +manageUsers() } User <|-- Admin ``` -------------------------------- ### Adding Footnotes (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Demonstrates how to add footnote references within the text using the [^label] syntax and define the footnote content elsewhere in the document using [^label]: followed by the content. ```markdown Here's a sentence with a footnote reference[^1]. [^1]: This is the footnote content. ``` -------------------------------- ### Linking to GitBook Pages with Custom Text (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Explains how to create internal links to other pages within a GitBook using the {% page-ref page="./path/to/page.md" %} syntax, allowing you to specify custom text for the link instead of just the page title. ```markdown {% page-ref page="./path/to/page.md" %} My Custom Link Text {% endpage-ref %} ``` -------------------------------- ### Creating GitBook Figure Block with HTML Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Illustrates how to use GitBook's extended figure syntax, based on HTML tags, to include an image with a caption. This provides more structured presentation than basic Markdown. It requires an image source ('src'), alternative text ('alt'), and allows for a descriptive caption via the '
' tag. ```HTML
Description of image
Caption text goes here
``` -------------------------------- ### Linking to External Image URL Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Demonstrates how to embed an image hosted on an external website using its full URL in the Markdown syntax. This method links directly to the source but has considerations regarding the external source's reliability and potential hotlinking restrictions. ```Markdown ![Logo](https://example.com/images/logo.png) ``` -------------------------------- ### Flowchart with Decision and Loop in Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Illustrates a simple top-down flowchart using 'graph TD'. It includes a decision node represented by curly braces and a loop back to the decision point. ```Mermaid graph TD A[Start] --> B{Is it working?} B -- Yes --> C[Great!] B -- No --> D[Debug] D --> B ``` -------------------------------- ### Creating a Sequence Diagram with Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Shows how to define interactions between participants over time using the 'sequenceDiagram' directive. Participants are named and interactions are depicted with various arrow types like '->>' for synchronous calls and '-->>' for replies. ```Mermaid sequenceDiagram User->>App: Login request App->>Database: Validate credentials Database-->>App: Authentication result App-->>User: Login response ``` -------------------------------- ### Adding Horizontal Rules (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Shows how to create horizontal separators or thematic breaks by placing three or more hyphens (---) or asterisks (***) on a line by themselves. ```markdown --- or *** ``` -------------------------------- ### Using HTML Div in Markdown (HTML/Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Shows how to embed standard HTML elements like a
directly within Markdown content in GitBook. This allows for more granular control over styling and layout than native Markdown. ```html
This is a custom styled div.
``` -------------------------------- ### Setting Custom Permalink in GitBook Page Frontmatter (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/gitbook-structure/routing.md This Markdown snippet demonstrates using YAML frontmatter at the beginning of a page file to set a custom permalink URL, overriding the default URL generated from the file path. This is particularly useful for GitHub-synced GitBooks. ```markdown --- permalink: /custom-url-path --- # My Page with Custom URL ``` -------------------------------- ### Referencing Image in .gitbook/assets Directory Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Shows the Markdown syntax for referencing an image stored within the standard GitBook assets directory. This is the typical location for images managed via the GitBook editor or when syncing with platforms like GitHub, using a path relative to the book's root. ```Markdown ![Architecture diagram](.gitbook/assets/diagrams/architecture.png) ``` -------------------------------- ### Looping with Line Numbers (JavaScript, GitBook) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/code-snippets.md This JavaScript code snippet contains a basic `for` loop that iterates and prints numbers from 1 to 3. Its primary purpose is to illustrate the effect of enabling line numbers using the `lineNumbers='true'` parameter in a GitBook code block. ```javascript // Line numbers are displayed function countToThree() { for (let i = 1; i <= 3; i++) { console.log(i); } } ``` -------------------------------- ### Aligning Table Content (Markdown) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/markdown-basics.md Shows how to control text alignment within table columns (left, center, right) by adding colons (:) to the separator line. A colon on the left aligns left, on the right aligns right, and on both sides centers the content. ```markdown | Left-aligned | Center-aligned | Right-aligned | |:-------------|:--------------:|---------------:| | Content | Content | Content | ``` -------------------------------- ### Styling Flowchart Node Shapes in Mermaid Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/diagrams.md Demonstrates different available node shapes for flowchart diagrams in Mermaid using 'graph TD'. Various syntax elements like [], (), (()), {}, >>, etc., are used to define the shape of each node. ```Mermaid graph TD A[Rectangle] B(Rounded Rectangle) C([Stadium]) D[[Subroutine]] E[(Database)] F((Circle)) G>Asymmetric] H{Diamond} I{{Hexagon}} J[/Parallelogram/] K[\Parallelogram\] ``` -------------------------------- ### Inserting SVG Image with Markdown Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Shows how to insert an SVG (Scalable Vector Graphics) image using the standard Markdown image syntax. SVG is suitable for diagrams and illustrations as it scales without losing quality, referenced here with a relative path. ```Markdown ![Diagram](./diagrams/architecture.svg) ``` -------------------------------- ### Centering Image with CSS Style Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Provides CSS code within an inline 'style' attribute to center an image horizontally. Setting 'display: block' makes the image behave like a block-level element, allowing 'margin: 0 auto' to apply equal left and right margins, thus centering the image. ```CSS Description ``` -------------------------------- ### Aligning Image Right with CSS Style Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/inserting-images.md Demonstrates using inline CSS within the 'style' attribute to align an image to the right. The 'float: right' property makes the image float on the right side, and 'margin-left: 10px' adds space between the image and surrounding text, allowing text to wrap around it. ```CSS Description ``` -------------------------------- ### Displaying Long String with Wrapping (JavaScript, GitBook) Source: https://github.com/unkinseong/gitbook-unofficial-sdk-lazy/blob/main/content-creation/code-snippets.md This JavaScript snippet includes a deliberately long string variable definition. It is used to demonstrate how the `overflow='wrap'` parameter prevents horizontal scrolling for long lines of code, causing them to wrap within the GitBook code block instead. ```javascript // Long lines will wrap instead of requiring horizontal scrolling const veryLongLine = "This is a very long line of code that would normally extend beyond the bounds of the code block and require horizontal scrolling, but with overflow='wrap' it will automatically wrap to the next line."; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.