Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Svelte Prism Plugin

NotificationsYou must be signed in to change notification settings

phptuts/Svelte-PrismJS

Repository files navigation

This package is a wrapper for PrismJS. It works with line numbers and whitespace clean up out of the box. You can enable other plugins and languages as well. It was inspired bysvelte-prism, another Svelte Prism package.

Live Svelte Demo

The repo has the Svelte code to run the demo.

Sapper Example

Routify Example

Features

  • Supports PrismJS plugins and data attributes being passed to the pre element.
  • Allows for client side loading in Sapper and Routify.
  • Supports code being changed dynamically in the Prism html element.
  • Examples and setup instructions.

Svelte Setup Instructions

  1. Runnpm install --save-dev svelte-prismjs

  2. Load the css via CDN (if loading via CDN skip ahead toOption B) or...

  3. npm install rollup-plugin-css-only

Rollup Config

  1. Import the css into yourmain.js file.
import"prismjs/plugins/line-numbers/prism-line-numbers.css";import"prismjs/plugins/command-line/prism-command-line.css";import"prismjs/plugins/line-highlight/prism-line-highlight.css";import"prismjs/themes/prism.css";import"prismjs/themes/prism-coy.css";

Option B - CDN links to copy to your index.html

Be sure to double check link integrity atPRISM CDN

<!-- base theme --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ=="crossorigin="anonymous"/><!-- coy theme --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-coy.min.css"integrity="sha512-CKzEMG9cS0+lcH4wtn/UnxnmxkaTFrviChikDEk1MAWICCSN59sDWIF0Q5oDgdG9lxVrvbENSV1FtjLiBnMx7Q=="crossorigin="anonymous"/><!-- Number lines  --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.css"integrity="sha512-cbQXwDFK7lj2Fqfkuxbo5iD1dSbLlJGXGpfTDqbggqjHJeyzx88I3rfwjS38WJag/ihH7lzuGlGHpDBymLirZQ=="crossorigin="anonymous"/>

Sapper Instructions

Sapper Example

  1. Runnpm install svelte-prismjs

  2. You can either include the cdn links in yourtemplate.html file or you can install therollup-css-only-plugin. It is basically what step 2 is for Svelte minus different directories. For Sapper be sure you put the file in the static folder.

  3. ImportSvelte-Prism (Because Prism uses the window object we have to do some weird stuff to get it work. For now here is the work around.).

let Prism;onMount(async () => {// Load the prismjs first after the page is loadedconst prismModule=awaitimport("svelte-prismjs");awaitimport("prismjs/components/prism-c.js");awaitimport("prism-svelte");awaitimport("prismjs/plugins/line-highlight/prism-line-highlight.js");awaitimport("prismjs/plugins/file-highlight/prism-file-highlight.js");// Once everything is loaded load the prismjs modulePrism=prismModule.default;  });  <svelte:componentthis={Prism}>  {`let b = 3;function helloWorld() {console.log("Hello World");}`}</svelte:component>

Routify Instructions

Routify Example

  1. Runnpm install svelte-prismjs

  2. Go toscripts/base.config.js and add therollup-css-only-plugin or go to thestatic/\_\_index.html file. If you do use npm to include css you will have to add it toApp.svelte file under global styles.

let Prism;onMount(async () => {// Load the prismjs first after the page is loadedconst prismModule=awaitimport("svelte-prismjs");awaitimport("prismjs/components/prism-c.js");awaitimport("prism-svelte");awaitimport("prismjs/plugins/line-highlight/prism-line-highlight.js");awaitimport("prismjs/plugins/file-highlight/prism-file-highlight.js");// Once everything is loaded load the prismjs modulePrism=prismModule.default;  });  <svelte:componentthis={Prism}>  {`let b = 3;function helloWorld() {console.log("Hello World");}`}</svelte:component>

Examples

Full Examples

Simple Example using the slot. Language will default to javascript.

<Prism>  { `let b = 3; function helloWorld() { console.log("Hello World"); } `}</Prism>

Example Language and line numbers and using the code prompt.

<PrismshowLineNumbers="{true}"language="c"code="{`int b= 3;int c=32;  `}/>

Props

  • code -> (string) for passing code into the element. You can also pass the code between the elements because it uses a slot.
  • language -> (string) Used the pass the language you are using. You will need to import the language if it is not included by default. Import this after you import the element, client side only. This is default to javascript.
import"prismjs/components/prism-c.js";
  • showLineNumbers -> (bool) Will turn on and off line numbers for your code. Defaulted to false.
  • normalizeWhiteSpace -> (bool) Will clean up the white space in your code. This is default to true.
  • normalizeWhiteSpaceConfig -> (object) Will be used to over ride the default config. For more information gohere.
  • classes -> custom css classes for the pre-element.
  • You can also pass any props or styles in the component and it will be applied to the pre-element.
[8]ページ先頭
©2009-2025 Movatter.jp