### Tables
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of GitHub-flavored markdown table syntax using HTML.
```html
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
```
--------------------------------
### Loading CSS
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Examples of how to load the github-markdown.css file in your HTML, including options for render-blocking and asynchronous loading.
```html
```
--------------------------------
### Task Lists
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of how to structure task lists in HTML for GitHub Flavored Markdown.
```html
Completed task
Incomplete task
```
--------------------------------
### React Integration
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of integrating github-markdown-css with a React component.
```jsx
import 'github-markdown-css';
export function MarkdownViewer({ html }) {
return (
);
}
```
--------------------------------
### Python with Flask Server-Side Integration
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of server-side rendering markdown to HTML with github-markdown-css using Python and Flask.
```python
from flask import Flask, render_template_string
import markdown
app = Flask(__name__)
@app.route('/preview')
def preview():
with open('content.md', 'r') as f:
markdown_content = f.read()
html = markdown.markdown(markdown_content, extensions=['fenced_code', 'tables'])
return render_template_string('''
{{ html|safe }}
''', html=html)
if __name__ == '__main__':
app.run()
```
--------------------------------
### Svelte Integration
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of integrating github-markdown-css with a Svelte component.
```svelte
{@html html}
```
--------------------------------
### Node.js with Express Server-Side Integration
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of server-side rendering markdown to HTML with github-markdown-css using Node.js and Express.
```javascript
import express from 'express';
import { marked } from 'marked';
import fs from 'fs';
const app = express();
app.get('/preview', (req, res) => {
const markdownContent = fs.readFileSync('content.md', 'utf-8');
const html = marked(markdownContent);
res.send(`
${html}
`);
});
app.listen(3000);
```
--------------------------------
### Vue Integration
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of integrating github-markdown-css with a Vue component.
```vue
```
--------------------------------
### Image Syntax Examples
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Examples of inline and reference-style image syntax in Markdown.
```markdown
```
```markdown
![Alt text][id]
```
```markdown
[id]: url/to/image "Optional title attribute"
```
--------------------------------
### Theme Switching with JavaScript
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
JavaScript examples for dynamically switching themes (dark, light, or system preference) on a markdown container.
```javascript
// Get the markdown container
const container = document.querySelector('.markdown-body');
// Switch to dark theme
container.setAttribute('data-theme', 'dark');
// Switch to light theme
container.setAttribute('data-theme', 'light');
// Follow system preference
container.removeAttribute('data-theme');
// Toggle theme
function toggleTheme() {
const current = container.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
container.setAttribute('data-theme', next);
}
```
--------------------------------
### Install with npm
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/readme.md
Install the github-markdown-css package using npm.
```sh
npm install github-markdown-css
```
--------------------------------
### Image Center Align
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of how to center-align an image.
```html
```
--------------------------------
### Image Examples
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Demonstrates inline and reference-style image syntax in Markdown.
```Markdown
Reference-style:
![alt text][logo]
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
```
--------------------------------
### Framed Image
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of an image with a frame and a caption.
```html
Image caption
```
--------------------------------
### Syntax-Highlighted Blocks
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of a syntax-highlighted code block using a
with class 'highlight' and a tag.
```html
def hello():
print('Hello, World!')
```
--------------------------------
### Core Container Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/css-classes.md
Example of how to use the .markdown-body class to wrap markdown content.
```html
Heading
Paragraph text
```
--------------------------------
### Light Theme Only
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Using github-markdown-light.css to enforce the light theme.
```html
```
--------------------------------
### Reference Links in Action
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
A comprehensive example of reference links.
```markdown
I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"
```
--------------------------------
### Emphasis Examples
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Examples of how asterisks and underscores are used for emphasis in Markdown.
```markdown
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
```
```html
single asteriskssingle underscoresdouble asterisksdouble underscores
```
--------------------------------
### Reference-Style Links
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Examples of reference-style link syntax in Markdown.
```markdown
This is [an example][id] reference-style link.
This is [an example] [id] reference-style link.
[id]: http://example.com/ "Optional Title Here"
```
--------------------------------
### Minimal HTML Structure
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Basic HTML structure to apply github-markdown-css.
```html
Welcome to Markdown
Your markdown content here
```
--------------------------------
### Links
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Examples of inline and reference-style links.
```markdown
[I'm an inline-style link](https://www.google.com)
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
[I'm a reference-style link][Arbitrary case-insensitive reference text]
[I'm a relative reference to a repository file](../blob/master/LICENSE)
[You can use numbers for reference-style link definitions][1]
Or leave it empty and use the [link text itself]
Some text to show that the reference links can follow later.
[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com
```
--------------------------------
### Implicit Link Name Shortcut Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Example using the implicit link name shortcut with reference links.
```markdown
I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].
[google]: http://google.com/ "Google"
[yahoo]: http://search.yahoo.com/ "Yahoo Search"
[msn]: http://search.msn.com/ "MSN Search"
```
--------------------------------
### Inline Code
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of inline code within text using the tag.
```html
This is inline code within text.
```
--------------------------------
### 11ty (Eleventy) Integration Layout
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/implementation-patterns.md
Example layout file for integrating github-markdown-css with 11ty (Eleventy).
```html
{{ title }}
{{ content | safe }}
```
--------------------------------
### AppleScript Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Another example of an indented code block, this time with AppleScript.
```markdown
Here is an example of AppleScript:
tell application "Foo"
beep
end tell
```
--------------------------------
### Jekyll Integration Layout
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/implementation-patterns.md
Example layout file for integrating github-markdown-css with Jekyll.
```html
---
---
{{ content }}
```
--------------------------------
### Code Blocks
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Example of a standard code block using the
and tags with a language class.
```html
function hello() {
console.log('Hello, World!');
}
```
--------------------------------
### Manual Theme Override Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/api-reference/classes.md
HTML example demonstrating how to force a dark theme on the markdown body using the data-theme attribute.
```html
```
--------------------------------
### Usage Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/readme.md
Example of how to use github-markdown.css in an HTML document, including basic styling for the markdown-body container and responsive adjustments.
```html
Unicorns
All the things
```
--------------------------------
### Inline Links
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Examples of inline link syntax in Markdown.
```markdown
This is [an example](http://example.com/ "Title") inline link.
[This link](http://example.net/) has no title attribute.
```
--------------------------------
### Task List Item Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/css-classes.md
Example of a GFM task list item structure.
```html
Task description
```
--------------------------------
### Highlight Class Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/css-classes.md
Example of using the .highlight class for syntax-highlighted code blocks.
```html
# Highlighted code here
```
--------------------------------
### Images
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Example of an image with inline style.
```markdown
Here's our logo (hover to see the title text):
Inline-style:
```
--------------------------------
### Code Blocks
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Examples of code blocks.
```html
foo
```
```html
foo
```
```html
```
```html
```
--------------------------------
### HTML table example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Example of how to include an HTML table within Markdown content.
```html
This is a regular paragraph.
Foo
This is another regular paragraph.
```
--------------------------------
### Manual Theme Override Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/css-classes.md
Example demonstrating how to manually override the theme (light or dark) on the .markdown-body element using data attributes.
```html
```
--------------------------------
### Image Alignment Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/css-classes.md
Example of floating an image to the left with text wrapping.
```html
Text wraps around the image...
```
--------------------------------
### Hugo Integration Layout
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/implementation-patterns.md
Example layout file for integrating github-markdown-css with Hugo.
```html
{{ .Title }}
{{ .Content }}
```
--------------------------------
### Alert Boxes (Callouts)
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Examples of different markdown alert types (note, warning, important, tip, caution) using HTML structure.
```html
Note
This is a note callout
Warning
This is a warning callout
Important
This is an important callout
Tip
This is a tip callout
Caution
This is a caution callout
```
--------------------------------
### Note Alert HTML Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/api-reference/classes.md
Example HTML for a note-type alert box.
```html
Note
Important note here
```
--------------------------------
### Using Highlight.js
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/usage-guide.md
Apply syntax highlighting to code blocks using Highlight.js.
```html
```
--------------------------------
### Alert Note Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/css-classes.md
Example of an informational alert box.
```html
Note
Important information here
```
--------------------------------
### Loading themes from CDN
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/css-themes.md
Example of linking the CSS file from a CDN.
```html
```
--------------------------------
### Syntax Highlighting Example
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/_autodocs/api-reference/classes.md
Example of how syntax highlighting classes are applied to HTML elements to style code tokens.
```html
functiongetName() {
return"value";
}
```
--------------------------------
### Code Span Examples
Source: https://github.com/sindresorhus/github-markdown-css/blob/main/index.html
Examples of using backticks for inline code spans in Markdown.
```markdown
Use the `printf()` function.
```
```html
Use the printf() function.
```
```markdown
``There is a literal backtick (`) here.``
```
```html
There is a literal backtick (`) here.
```
```markdown
A single backtick in a code span: `` ` ``
A backtick-delimited string in a code span: `` `foo` ``
```
```html
