💻 Code Sample Plugin

Overview

The Code Sample plugin enables code highlighting with 50+ language support through Prism.js integration.

Features

• ✅ 50+ language support
• ✅ Syntax highlighting
• ✅ Line numbers
• ✅ Copy code button
• ✅ Language selection
• ✅ Multiple themes
• ✅ Plugin support

Supported Languages

JavaScript, TypeScript, Python, Java, C++, C#, PHP, Ruby, Go, Rust, and 40+ more!

Installation

npm install @editora/plugins/code-sample

Setup with Prism.js

Include Prism.js in your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>

Basic Usage

import { Editor } from '@editora/core';
import { CodeSamplePlugin } from '@editora/plugins/code-sample';

const editor = new Editor({
  element: '#editor',
  plugins: [CodeSamplePlugin()]
});

Insert Code Block

Use the "Code Block" button in toolbar or press Ctrl+Shift+C

Configuration

CodeSamplePlugin({
  theme: 'prism',
  lineNumbers: true,
  highlightInline: true,
  defaultLanguage: 'javascript'
})

Supported Themes

• prism (default)
• prism-dark
• prism-twilight
• prism-okaidia