Source code viewing with syntax highlighting and support for multiple content types. The Sources tool provides comprehensive viewing capabilities for various content types with proper formatting and highlighting.
Display various content types with appropriate formatting and highlighting.
/**
* Display content in the source viewer
* @param type - Content type for proper rendering
* @param val - Content to display
* @returns Sources instance for chaining
*/
set(type: string, val: any): Sources;Supported Content Types:
'html' - HTML with syntax highlighting'js' - JavaScript with syntax highlighting'css' - CSS with syntax highlighting'img' - Image display with dimensions'object' - JSON object viewer'raw' - Plain text viewer'iframe' - Embedded iframe viewerconst config: {
set<K extends keyof SourcesConfig>(name: K, value: SourcesConfig[K]): void;
};
interface SourcesConfig {
/** Show line numbers in code display */
showLineNum?: boolean;
/** Beautify code formatting */
formatCode?: boolean;
/** Code indentation size */
indentSize?: string;
}Usage Examples:
const sources = eruda.get('sources');
// Display different content types
sources.set('js', 'function hello() { console.log("Hello World"); }');
sources.set('html', '<div class="container"><h1>Title</h1></div>');
sources.set('css', '.container { background: #f0f0f0; padding: 20px; }');
sources.set('object', { user: 'Alice', age: 30 });