Add rendering for keyboard shortcut

[BuZZ-dEE]

It would be great to have keyboard shortcuts rendered like e.g. here on GitHub.

CtrlAltF1

[yhatt]

Currently Marp for VS Code has not default shortcuts because we have to avoid conflicted keybinding against OS, VS Code and a lot of extensions (e.g. Ctrl+Alt+F1 is already used in Linux environment to switch virtual consoles).

We need the consensus of Marp community to implement default key binding. You can assign custom key binding to Marp commands in "Keyboard Shortcuts" if necessary.

[BuZZ-dEE]

The key binding above was just an example for the rendering.

[yhatt]

Uh-oh, we had misinterpreted your intention. Are you talking about the appearance of <kbd> tag, right?

Appearance has defined as Marp Core's built-in theme. Opening an issue in marp-team/marp-core would be better.

FYI: Marp Core's default theme is inherited from GitHub CSS style, so <kbd> should render with the appearance you expected. When you are using the other theme, you can tweak style like following:

---
marp: true
theme: gaia
style: |
  kbd {
    background-color: #fafbfc;
    border: thin solid #d1d5da;
    border-bottom-color: #c6cbd1;
    border-radius: 0.2em;
    box-shadow: inset 0 -1px 0 #c6cbd1;
    color: #444d56;
    display: inline-block;
    font: 1em monospace;
    padding: 3px 5px;
    vertical-align: middle;
  }
---

<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F1</kbd>

[BuZZ-dEE]

Uh-oh, we had misinterpreted your intention. Are you talking about the appearance of <kbd> tag, right?

Yes

It is rendered like this:

Also if I add this:

---
marp: true
theme: gaia
style: |
  kbd {
    background-color: #fafbfc;
    border: thin solid #d1d5da;
    border-bottom-color: #c6cbd1;
    border-radius: 0.2em;
    box-shadow: inset 0 -1px 0 #c6cbd1;
    color: #444d56;
    display: inline-block;
    font: 1em monospace;
    padding: 3px 5px;
    vertical-align: middle;
  }
---

[yhatt]

Could you enable HTML from preference?

[BuZZ-dEE]

If I do that:

---
marp: true
theme: gaia
html: true
---

it does also not work.

[yhatt]

html: true is not correct way to enable HTML. (See https://github.com/marp-team/marpit/issues/198 for a reason)

You should enable HTML in VS Code setting as following. (https://github.com/marp-team/marpit/issues/162#issuecomment-490004489, https://github.com/marp-team/marpit/issues/178#issuecomment-511106762)

[BuZZ-dEE]

thx, that solves my problem :)