README: Add styling for <kbd> tags (#6423)

Author: ToBinio

app/components/rendered-html.module.css

@@ -39,6 +39,21 @@
         font-family: var(--font-monospace);
     }
 
+    kbd {
+        font-family: var(--font-monospace);
+        font-size: 11px;
+
+        padding: 2px 5px 3px 5px;
+
+        border-radius: 7px;
+
+        position: relative;
+        bottom: 2px;
+
+        border: 1px solid var(--grey700);
+        box-shadow: inset 0 -2px 0 var(--grey600);
+    }
+
     table {
         border-collapse: collapse;
         display: block;

cargo-registry-markdown/lib.rs

@@ -329,6 +329,16 @@ mod tests {
         assert_eq!(result, "<p>foo_readme</p>\n<p>alert(\'Hello World\')</p>\n");
     }
 
+    #[test]
+    fn text_with_kbd_tag() {
+        let text = "foo_readme\n\nHello <kbd>alert('Hello World')</kbd>";
+        let result = markdown_to_html(text, None, "");
+        assert_eq!(
+            result,
+            "<p>foo_readme</p>\n<p>Hello <kbd>alert(\'Hello World\')</kbd></p>\n"
+        );
+    }
+
     #[test]
     fn text_with_inline_javascript() {
         let text = r#"foo_readme\n\n<a href="https://crates.io/crates/cargo-registry" onclick="window.alert('Got you')">Crate page</a>"#;