Home → Questions →

Rendering keyboard keys

• Edit

Ruslan

09 Sep, 2015 08:24 PM

Hello!
Is it possible to have Marked render keyboard keys as.. well... naturally looking keyboard keys?
Like the ones that i use in Cheaters (xCTRL) or better yet any keyboard key with <kbd> keyword like on Stack Exchange sites.

1. Support Staff 1 Posted by Brett on 09 Sep, 2015 09:05 PM

   

   Add this to the Style -> Additional CSS field:

   kbd {
     background: #fff;
     border: 1px solid #ddd;
     padding: 2px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     color: #222222; }
   

   That's what Cheaters uses, but ported to a <kbd> tag. Feel free to experiment. If you want to apply it to all inline code (single backtick), change the selector to kbd, code.

   • Edit

2. 2 Posted by Ruslan on 10 Sep, 2015 06:32 PM

   

   Thank you, that works perfectly in Marked!
   Slightly offtopic maybe, but is it possible to have Cheaters render "kbd" or "code" tag in MD files properly?
   Now i can see that only html files render "kbd" or "code" tag in Cheaters. But I prefer to create and save my cheatsheets in MD files since they are so much easier to create and edit and right now MD files in Cheaters just render those four "x" commands to keyboard glyphs. It would be great if i can wrap any symbol in "kbd" or "code" tag in MD file.

   • Edit

3. Support Staff 3 Posted by Brett on 10 Sep, 2015 07:24 PM

   

   You can modify the CSS file for Cheaters to use `kbd`, but you'll need
   to manually insert any tags not created by the xXXX shortcuts. Single
   backtick code in Markdown files should already work fine. If you have
   further questions on that, you can post them at
   https://github.com/ttscoff/cheaters/issues

   Thanks!

   Brett

   • Edit