@magic-modules/pre

this is the@magic-modules Pre component.

syntax highlighting for javascript

installation

npm install @magic-modules/pre

usage

multi line

in a page / component, just pass some string to the markdown code component:

Pre(`const foo = bar => {  console.log(bar)}`)

renders

const foo = bar => {  console.log(bar)}

single lines

single line code blocks work:

Pre({ lines: false }, 'one line of code')

renders

one line of code

themes

pre supports two color themes. It will automatically adapt to the global theme settings.

the @magic-modules/[light-switch](https://github.com/magic-modules/light-switch) module allows users to toggle dark/light modes, which will also recolor pre to match.

if you have javascript activated, just click the small lightbulb in the top right corner of this page to test this.

syntax

comments

Pre can handle single line comments starting with: //. Multiline comments are on the todo list.

const v = "t" // single line comment

urls

Pre can handle urls even though they look like comments. Those urls will even turn into Link elements. Urls are identified by containing the three characters `://`

https://jaeh.at

Pre even handles links in comments and strings

before comment // comment http://link.in.comment

emails

Pre finds emails in your text. emails can either start with mailto: or must include at least one dot `.` and at least one `@`.

yes, strictly speaking, name@host is a valid email, but how often have you seen that ?

if you actually do need support for name@local, please file an issue.

examples

mail@jaeh.at

mailto:mail@jaeh.at

link in a comment:

const v = "t" // comment https://jaeh.at// and in a comment starting the line https://artificialmuseum.com

Without line numbers

Pre({ lines: false }, `String to highlightwithoutlinenumbers`)

String to highlightwithoutlinenumbers

comments with indent

comments can be indented:

// no indent  // 2 spaces    // 4 spaces

multiline

multiline strings and comments currently do not get handled

looong lines

data:application/octet-stream;base64,21Ziv05hrD8iBMC+8aBivyvvqD8iBMC+rQ5hv05hrD+jO7K+0/pfv2jRrD+jO7K+21Ziv05hrD8iBMC+rQ5hv05hrD+jO7K+0/pfvz7urT8iBMC+21Ziv05hrD8iBMC+0/pfv2jRrD+jO7K+rQ5hv05hrD+jO7K+0/pfv05hrD9I+K++0/pfv2jRrD+jO7K+kRZZv+AArz+jO7K+0/pfvz7urT8i

renders

data:application/octet-stream;base64,21Ziv05hrD8iBMC+8aBivyvvqD8iBMC+rQ5hv05hrD+jO7K+0/pfv2jRrD+jO7K+21Ziv05hrD8iBMC+rQ5hv05hrD+jO7K+0/pfvz7urT8iBMC+21Ziv05hrD8iBMC+0/pfv2jRrD+jO7K+rQ5hv05hrD+jO7K+0/pfv05hrD9I+K++0/pfv2jRrD+jO7K+kRZZv+AArz+jO7K+0/pfvz7urT8i

source

the source for this page is in the example directory and gets built and published to github using @magic/core