marked icon indicating copy to clipboard operation
marked copied to clipboard

Features_request: Add Interactive Code Block Features

Open Michealjunior opened this issue 4 weeks ago • 1 comments

Describe the feature Marked.js renders code blocks as static HTML without interactive features. Users need enhanced code blocks with line numbers, copy functionality, and syntax-aware execution. This improvement makes code examples more accessible and functional in documentation and educational content, providing better user experience for developers reading markdown content.

Why is this feature necessary? Implement interactive code blocks that support toggleable line numbers, one-click copy functionality, language detection with syntax highlighting, and safe code execution sandbox for supported languages. Ensure the implementation is opt-in via a new interactiveCode option, maintains backward compatibility, handles large code blocks efficiently, is fully accessible with keyboard navigation and ARIA labels, and works in all modern browsers. Performance: lazy-load interactive features with no impact on initial page load and memory-efficient handling of multiple code blocks.

Describe alternatives you've considered New option: interactiveCode: boolean in MarkedOptions interface. CSS classes prefixed with marked-. No external dependencies beyond core browser APIs. Error boundaries for sandboxed execution.

Michealjunior avatar Nov 26 '25 09:11 Michealjunior

You can create an extension that does this 😁👍

UziTech avatar Nov 26 '25 12:11 UziTech