eleventy-plugin-syntaxhighl.../demo/test-markdown.md

4.5 KiB

<html lang="en"> <head> </head>

Just curious what

No lang

function myFunction() {
  return true;
}

Langs

function myFunction() {
  return true;
}
function myFunction() {
  return true;
}
function myFunction() {
  return true;
}
let multilineString = `
  this is the first line
  this is the middle line
  this is the last line
`;

Dash line

let multilineString = `
  this is the first line
  this is the middle line
  this is the last line
`;

Highlight 1 & 3

let multilineString = `
  this is the first line
  this is the middle line
  this is the last line
`;

Highlight 1, 3-6

let multilineString = `
  this is the first line
  this is the second line
  this is the third line
  this is the fourth line
  this is the fifth line
  this is the sixth line
  this is the seventh line
  this is the eighth line
`;

Highlight 1, 3-6

let multilineString = `
  this is the first line
  this is the second line
  this is the third line
  this is the fourth line
  this is the fifth line
  this is the sixth line
  this is the seventh line
  this is the eighth line
`;
let multilineString = `
  this is the first line
  this is the second line
  this is the third line
  this is the fourth line
  this is the fifth line
  this is the sixth line
  this is the seventh line
  this is the eighth line
`;

Line numbers and highlight Highlight 1, 3-6

let multilineString = `
  this is the first line
  this is the second line
  this is the third line
  this is the fourth line
  this is the fifth line
  this is the sixth line
  this is the seventh line
  this is the eighth line
`;

Line numbers and highlight Highlight 3-6

let multilineString = `
  this is the first line
  this is the second line
  this is the third line
  this is the fourth line
  this is the fifth line
  this is the sixth line
  this is the seventh line
  this is the eighth line
`;

Line numbers, highlight, base number 200, table Highlight 202-204

let multilineString = `
  this is the first line
  this is the second line
  this is the third line
  this is the fourth line
  this is the fifth line
  this is the sixth line
  this is the seventh line
  this is the eighth line
`;

Line numbers, highlight, base number 200, table Highlight 3-6 (won't work)

let multilineString = `
  this is the first line
  this is the second line
  this is the third line
  this is the fourth line
  this is the fifth line
  this is the sixth line
  this is the seventh line
  this is the eighth line
`;

Line numbers, highlight, base number 200, table Highlight 1, 3-6, separated spaces (won't work)

let multilineString = `
  this is the first line
  this is the second line
  this is the third line
  this is the fourth line
  this is the fifth line
  this is the sixth line
  this is the seventh line
  this is the eighth line
`;

Other arguments

Table

function myFunction() {
  return true;
}

linenums

function myFunction() {
  return true;
}

Scrollbar

import { aReallyLongFunctionNameThatCouldBeLongerButThisShouldBeLongEnoughByNowHopefully as anEvenLongerFunctionNameWithMoreCharactersThanCouldBeImaginedByAnyOnePersonInThisEntireWorldOfPeopleThatOneMightKnowAtLeastThatIsWhatIsTheorizedByThisLongName } from 'wow-this-is-so-long-you-might-need-a-scrollbar-to-see-it.long-ol-file-extension-that-should-not-be-this-long-on-a-real-site-but-this-is-to-demonstrate-the-accessibility-of-tabindex-and-scrollbars.js';

CSS

pre {
  display: block;
  padding: 0.75rem 1rem;
  line-height: 1.5;

  overflow-x: auto;
  background-color: #eee;
  font-size: 1em; /*14px /16*/
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;

  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;

  background-color: #272822;
  color: #fff;
}

:not(pre) > code[class*="language-"] {
     padding: 0.1em 0.3em;
     border-radius: 0.3em;
     white-space: normal;
 }

 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
     color: #8da1b9;
 }
</html>