Add tabindex="0" to your fenced code blocks in markdown-it for keyboard accessibility.

npm i markdown-it-code-tabindex

Refer to the markdown-it docs on loading plugins.

const markdownIt = require('markdown-it');
const markdownItTabIndex = require('markdown-it-code-tabindex');

const md = markdownIt().use(markdownItTabIndex, {
  target: 'code', // or 'pre'
});

const markdownIt = require('markdown-it');
const markdownItAttributes = require('markdown-it-attrs');
const markdownItPrism = require('markdown-it-prism');
const markdownItCodeTabIndex = require('markdown-it-code-tabindex');

const md = 
  markdownIt()
  .use(markdownItPrism)
  .use(markdownItAttributes)
  // Order does not matter; this could go before other plugins
  .use(markdownItCodeTabIndex, { target: 'code' });

There are two ways to handle long lines of text in fenced code blocks (and in general):

1. Allow whitespace to wrap to the next line whenever the current line would overflow.
2. Prevent whitespace from wrapping and set overflow-x: auto on your code block.

Which one you choose comes down to personal preference, but scrollable code blocks tend to be more common. However, there is one drawback to this approach: Scroll regions are not accessible to keyboard users unless they are focusable. And the only way to make them focusable is to set tabindex="0" on those scroll containers. However, there isn't a straightforward way to do this in Markdown.

This plugin automatically adds tabindex="0" to all of your fenced code blocks in markdown-it. It does not modify inline code, nor does it remove or modify any other HTML attributes.

This plugin is compatible with the following markdown-it plugins:

• markdown-it-attrs
• markdown-it-prism

The order in which you load these plugins does not matter.