Inline Code

*Styles follow github-markdown-css

Text containing inline code.

A sentence combining normal text, bold, italic, and code.

Use npm install to install dependencies.

scss/canvas/component/_code.scss

Code Block

// JavaScript sample
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("World");
scss/canvas/component/_code.scss

Code Block (Multiple Languages)

# Python sample
def factorial(n):
    if n <= 1:
        return 1
    return n * factorial(n - 1)
# Shell script
echo "Hello, Marp!"
scss/canvas/component/_code.scss

CSS Variables

CSS Variable Default
--code-font-mono var(--font-family-mono)
--code-color-bg 10% grey-light
--code-color-fg var(--color-grey-darkest)
--code-border-radius var(--corner-radius-m) (8px)
scss/canvas/component/_code.scss

Customization Example

Override to dark theme colors:

---
style: |
  :root {
    --code-color-bg: #1e293b;
    --code-color-fg: #e2e8f0;
  }
---
// Dark theme code block
const message = "Hello, World!";
console.log(message);
scss/canvas/component/_code.scss