diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 989bfc044..a1f562525 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -51,6 +51,8 @@ html {
   --color-code-bg: var(--color-bg);
   --color-code-text: var(--color-text-dark);
 
+  --color-kbd-shadow: rgba(0, 0, 0, 0.25);
+
   --color-ad: #d6e6f9;
 
   --shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
@@ -139,6 +141,8 @@ html {
   --color-code-bg: var(--color-button-bg);
   --color-code-text: var(--color-text-dark);
 
+  --color-kbd-shadow: rgba(0, 0, 0, 0.35);
+
   --color-ad: #2c323a;
 
   --shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
@@ -338,6 +342,16 @@ button {
   }
 }
 
+kbd {
+  background-color: var(--color-code-bg);
+  color: var(--color-code-text);
+  box-shadow: 0 2px 1px var(--color-kbd-shadow);
+  padding: 0.2em 0.5em 0.1em;
+  border-radius: 3px;
+  line-height: 1;
+  font-size: 0.85em !important;
+}
+
 // @import "vue-select/src/scss/vue-select.scss";
 
 @import '~assets/styles/highlightjs.scss';
diff --git a/plugins/xss.js b/plugins/xss.js
index cdc801ea6..1d826f388 100644
--- a/plugins/xss.js
+++ b/plugins/xss.js
@@ -13,6 +13,7 @@ const options = {
     h4: ['id'],
     h5: ['id'],
     h6: ['id'],
+    kbd: ['id'],
     input: ['checked', 'disabled', 'type'],
     iframe: ['width', 'height', 'allowfullscreen', 'frameborder'],
     img: [...xss.whiteList.img, 'style'],