Skip to content

DevChanQ/scrype

BranchesTags

Repository files navigation

Scrype

Live Demo

Scrype is a TypeScript library that allows you to present code snippets in an interesting way with syntax highlighting and smooth scrolling animations.

Scrype Demo

Installation

npm i scrype --save

Usage

Basic TypeScript/JavaScript

import Scrype from 'scrype';
import type { ScrypeOptions } from 'scrype';
// Import a theme for syntax highlighting
import 'scrype/themes/github-dark.min.css';

const code = `const greeting = "Hello, World!";
console.log(greeting);`;

const options: ScrypeOptions = {
  code,
  lang: "typescript", // or "javascript" or "html"
  pixelPerStep: 8,
  position: "top",
  codeContainerSelector: "#code-container",
  onProgress: (progress) => {
    console.log(`Progress: ${progress}%`);
  }
};

const scrype = new Scrype('#sticky-element', options);

Vue.js Example

<script setup lang="ts">
import type { ScrypeOptions } from 'scrype';

const { $scrype } = useNuxtApp(); // or import Scrype directly

const code = `import type { ScrypeOptions } from 'scrype';
import Scrype from 'scrype';

const options: ScrypeOptions = {
  code: "console.log('Hello World')",
  lang: "typescript",
  pixelPerStep: 8,
  position: "top",
  codeContainerSelector: "#code-container",
};

new Scrype('#sticky', options);`;

onMounted(() => {
  const options: ScrypeOptions = {
    code,
    lang: "typescript",
    pixelPerStep: 8,
    position: "top",
    codeContainerSelector: "#code-container",
  };

  new $scrype('#sticky', options);
});
</script>

<template>
  <div id="sticky">
    <div id="code-container"></div>
  </div>
</template>

<style>
@import "scrype/themes/github-dark.min.css";
</style>

Browser Script Tag (CDN)

You can use Scrype directly in the browser without a build step via CDN:

<!DOCTYPE html>
<html>
<head>
  <!-- Scrype theme CSS -->
  <link rel="stylesheet" href="https://unpkg.com/scrype/dist/themes/github-dark.min.css">
</head>
<body>
  <div id="sticky">
    <div id="code-container"></div>
  </div>

  <!-- Scrype Browser Bundle -->
  <script src="https://unpkg.com/scrype/dist/scrype.browser.js"></script>
  
  <script>
    const code = `const greeting = "Hello, World!";
console.log(greeting);`;

    const options = {
      code: code,
      lang: "javascript",
      pixelPerStep: 8,
      position: "top",
      codeContainerSelector: "#code-container"
    };

    // Scrype is available as a global variable
    new Scrype('#sticky', options);
  </script>
</body>
</html>

The browser bundle is available at:

  • IIFE: https://unpkg.com/scrype/dist/scrype.browser.js
  • ESM: https://unpkg.com/scrype/dist/scrype.browser.esm.js

Options

Option Type Default Description
code string "null" The code string to display
lang "typescript" | "javascript" | "html" undefined Language for syntax highlighting
replacer Replacer undefined Custom replacer function for syntax highlighting
onProgress (progress: number) => void () => {} Callback function for progress updates (0-100)
codeContainerSelector string | null null CSS selector for the code container element
position "top" | "center" | "bottom" "top" Position of the sticky element
pixelPerStep number 20 Pixels to scroll per animation step
padding number 0 Additional padding for scroll container
removeCharacter string "~" Character to remove from code during animation

Custom Replacer Function

You can provide a custom syntax highlighter by implementing the Replacer type:

import type { Replacer } from 'scrype';

const customReplacer: Replacer = (code: string) => {
  // Your custom syntax highlighting logic
  return highlightedHtmlString;
};

const options: ScrypeOptions = {
  code: "your code here",
  replacer: customReplacer,
  // other options...
};

Using Highlight.js for Custom Languages

For languages not natively supported, we recommend using Highlight.js (which Scrype uses internally):

import hljs from 'highlight.js';
import type { Replacer } from 'scrype';

const pythonReplacer: Replacer = (code: string) => {
  return hljs.highlight(code, { language: 'python' }).value;
};

const options: ScrypeOptions = {
  code: "print('Hello from Python!')",
  replacer: pythonReplacer,
  // other options...
};

Syntax Highlighting Themes

Scrype includes pre-built themes for syntax highlighting. Import a theme CSS file:

import 'scrype/themes/github-dark.min.css';
import 'scrype/themes/github-light.min.css';
// ... other available themes

For a complete list of available themes, visit the Highlight.js styles repository.

TypeScript Support

Scrype is built with TypeScript and provides full type definitions:

import Scrype from 'scrype';
import type { ScrypeOptions, Replacer } from 'scrype';

// Full IntelliSense support for options
const options: ScrypeOptions = {
  // Your options with type safety
};

Language Support

Currently supported languages for built-in syntax highlighting:

  • typescript
  • javascript
  • html

For other languages, use the custom replacer function with Highlight.js which supports 190+ languages and 97 styles.

About

Scrype allows you to present code snippet in a interesting way

Resources

Readme

License

MIT license
Activity

Stars

14 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

2 tags

Packages

No packages published

Contributors 3

Languages