Skip to content

Commit f4f351e

Browse files
StfBauerStfBauer
committed
feat: add interactive examples and cleanup temporary files
- Add examples/ directory with demo scripts - Add --example CLI flag for running interactive demos - dynamic-loading: shows language loading statistics - syntax-colors: visual syntax highlighting demo - demo: comprehensive markdown feature showcase - Update .gitignore to prevent debug file commits - Update usage documentation" feat: Full syntax highlighting
1 parent 337d557 commit f4f351e

File tree

5 files changed

+281
-5
lines changed

5 files changed

+281
-5
lines changed

‎.gitignore‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,10 @@ dist
105105

106106
# Remove npm rc
107107
.npmrc
108-
.DS_Store
108+
.DS_Store
109+
110+
# Debug and temporary test files
111+
debug-*.js
112+
test-*.js
113+
test-*.md
114+
!test/

‎bin/markshell.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,51 @@ if (args.length === 0 || args.indexOf('--help') !== -1) {
3636
printHelp();
3737
}
3838

39+
// Handle --example flag to run interactive demos
40+
const exampleIdx = args.indexOf('--example');
41+
if (exampleIdx !== -1) {
42+
const path = require('path');
43+
const exampleName = args[exampleIdx + 1];
44+
45+
const examples = {
46+
'dynamic-loading': path.join(__dirname, '../examples/dynamic-loading-demo.js'),
47+
'syntax-colors': path.join(__dirname, '../examples/syntax-colors-demo.js'),
48+
'demo': path.join(__dirname, '../DEMO.md')
49+
};
50+
51+
if (!exampleName || !examples[exampleName]) {
52+
console.log(`Markshell - Version ${pkg.version}
53+
54+
${chalk.yellow.bold('Available examples:')}
55+
56+
${chalk.cyan('markshell --example dynamic-loading')}
57+
Interactive demo showing dynamic language loading with statistics
58+
59+
${chalk.cyan('markshell --example syntax-colors')}
60+
Visual demonstration of syntax highlighting colors
61+
62+
${chalk.cyan('markshell --example demo')}
63+
Comprehensive demo showcasing all markdown features and 25+ languages
64+
`);
65+
process.exit(0);
66+
}
67+
68+
const examplePath = examples[exampleName];
69+
70+
if (exampleName === 'demo') {
71+
// Render the DEMO.md file
72+
try {
73+
markshell.toConsole(examplePath);
74+
} catch (e) {
75+
printError(e);
76+
}
77+
} else {
78+
// Execute the example script
79+
require(examplePath);
80+
}
81+
process.exit(0);
82+
}
83+
3984
const theme = args.indexOf('--theme');
4085

4186
if (theme !== 1) {

‎docs/usage.md‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,34 @@
11
# Usage
22

33
```bash
4-
markshell [filenpath | -f [filepath] | --filepath [filepath]]
4+
markshell [filepath | -f [filepath] | --filepath [filepath]]
5+
markshell --example [example-name]
6+
markshell --help
57
```
68
7-
**filepath or -f **
9+
## Options
10+
11+
**filepath or -f**
812
: path to markdown file
13+
14+
**--example [name]**
15+
: run interactive examples and demos
16+
- `dynamic-loading` - Shows dynamic language loading with statistics
17+
- `syntax-colors` - Visual demonstration of syntax highlighting colors
18+
- `demo` - Comprehensive showcase of all markdown features
19+
920
**--help**
10-
: what you see now
21+
: display usage information
1122
1223
## Examples
1324
1425
```sh
26+
# Render a markdown file
27+
markshell ./my/markdownfile.md
1528
markshell --filepath './my/markdownfile.md'
16-
```
29+
30+
# Run interactive examples
31+
markshell --example dynamic-loading
32+
markshell --example syntax-colors
33+
markshell --example demo
34+
```

‎examples/dynamic-loading-demo.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
#!/usr/bin/env node
2+
/**
3+
* Interactive demonstration of dynamic PrismJS language loading
4+
* Shows syntax highlighting output AND loading statistics
5+
*/
6+
7+
const path = require('path');
8+
const markshell = require(path.join(__dirname, '../lib/index.js'));
9+
const syntaxHighlighter = require(path.join(__dirname, '../lib/syntaxhighlighter'));
10+
const fs = require('fs');
11+
12+
console.log('\n🎨 ===== SYNTAX HIGHLIGHTING DEMO WITH DYNAMIC LOADING =====\n');
13+
14+
// Show initial state
15+
console.log('📊 Initial State:');
16+
console.log(' Loaded languages:', syntaxHighlighter.getLoadedLanguagesInfo());
17+
console.log('');
18+
19+
// Create a test file with multiple languages
20+
const testContent = `# Code Examples
21+
22+
## JavaScript
23+
24+
\`\`\`javascript
25+
const greeting = "Hello World";
26+
console.log(greeting);
27+
\`\`\`
28+
29+
## Python
30+
31+
\`\`\`py
32+
def hello():
33+
print("Hello World")
34+
\`\`\`
35+
36+
## Shell
37+
38+
\`\`\`sh
39+
echo "Hello World"
40+
ls -la
41+
\`\`\`
42+
`;
43+
44+
// Write test file
45+
const testFile = '/tmp/markshell-test.md';
46+
fs.writeFileSync(testFile, testContent);
47+
48+
console.log('📝 Rendering markdown with syntax highlighting...\n');
49+
console.log('═'.repeat(80));
50+
51+
// Render the file (this will trigger dynamic loading)
52+
const output = markshell.toConsole(testFile);
53+
54+
console.log('═'.repeat(80));
55+
console.log('');
56+
57+
// Show what got loaded
58+
console.log('📊 After Rendering:');
59+
const info = syntaxHighlighter.getLoadedLanguagesInfo();
60+
console.log(' Loaded languages:', info);
61+
console.log(` Total: ${info.count} languages loaded dynamically`);
62+
console.log('');
63+
64+
// Test alias resolution
65+
console.log('🔍 Language Alias Resolution Examples:');
66+
console.log(' js →', syntaxHighlighter.resolveLanguageAlias('js'));
67+
console.log(' py →', syntaxHighlighter.resolveLanguageAlias('py'));
68+
console.log(' sh →', syntaxHighlighter.resolveLanguageAlias('sh'));
69+
console.log(' ts →', syntaxHighlighter.resolveLanguageAlias('ts'));
70+
console.log(' yml →', syntaxHighlighter.resolveLanguageAlias('yml'));
71+
console.log('');
72+
73+
// Test highlighting individual code blocks with different themes
74+
console.log('🎨 Theme Examples:\n');
75+
76+
const jsCode = 'const x = 42;\nconsole.log(x);';
77+
78+
console.log(' Theme: okaidia (dark)');
79+
console.log(' ─'.repeat(40));
80+
console.log(syntaxHighlighter.highlight(jsCode, 'javascript', 'okaidia'));
81+
console.log('');
82+
83+
console.log(' Theme: tomorrow');
84+
console.log(' ─'.repeat(40));
85+
console.log(syntaxHighlighter.highlight(jsCode, 'javascript', 'tomorrow'));
86+
console.log('');
87+
88+
console.log(' Theme: solarizelight');
89+
console.log(' ─'.repeat(40));
90+
console.log(syntaxHighlighter.highlight(jsCode, 'javascript', 'solarizelight'));
91+
console.log('');
92+
93+
// Final stats
94+
console.log('✅ Demo Complete!');
95+
console.log(` Languages now loaded: ${syntaxHighlighter.getLoadedLanguagesInfo().count}`);
96+
console.log(' All languages loaded on-demand (not at startup)');
97+
console.log('');
98+
99+
// Cleanup
100+
fs.unlinkSync(testFile);

‎examples/syntax-colors-demo.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
#!/usr/bin/env node
2+
/**
3+
* View actual syntax highlighting with colors in terminal
4+
* This demonstrates the ANSI color output
5+
*/
6+
7+
const path = require('path');
8+
const syntaxHighlighter = require(path.join(__dirname, '../lib/syntaxhighlighter'));
9+
10+
console.log('\n🌈 SYNTAX HIGHLIGHTING COLOR OUTPUT DEMO\n');
11+
12+
// Different code examples
13+
const examples = [
14+
{
15+
title: 'JavaScript',
16+
code: `function greet(name) {
17+
const message = "Hello, " + name;
18+
console.log(message);
19+
return true;
20+
}`,
21+
lang: 'javascript'
22+
},
23+
{
24+
title: 'Python',
25+
code: `def calculate(x, y):
26+
result = x + y
27+
print(f"Result: {result}")
28+
return result`,
29+
lang: 'python'
30+
},
31+
{
32+
title: 'Bash',
33+
code: `#!/bin/bash
34+
echo "Starting..."
35+
npm test
36+
exit 0`,
37+
lang: 'bash'
38+
},
39+
{
40+
title: 'TypeScript',
41+
code: `interface Person {
42+
name: string;
43+
age: number;
44+
}
45+
const person: Person = { name: "Alice", age: 25 };`,
46+
lang: 'typescript'
47+
},
48+
{
49+
title: 'JSON',
50+
code: `{
51+
"name": "markshell",
52+
"version": "1.7.0",
53+
"active": true
54+
}`,
55+
lang: 'json'
56+
},
57+
{
58+
title: 'Rust',
59+
code: `fn main() {
60+
let x = 42;
61+
println!("The answer is {}", x);
62+
}`,
63+
lang: 'rust'
64+
}
65+
];
66+
67+
// Render each example
68+
examples.forEach(({ title, code, lang }) => {
69+
console.log(`${'═'.repeat(60)}`);
70+
console.log(` ${title} (using alias: "${lang}")`);
71+
console.log(`${'═'.repeat(60)}`);
72+
73+
const highlighted = syntaxHighlighter.highlight(code, lang, 'okaidia');
74+
console.log(highlighted);
75+
console.log('');
76+
});
77+
78+
// Show loading statistics
79+
console.log(`${'═'.repeat(60)}`);
80+
console.log('📊 Language Loading Statistics');
81+
console.log(`${'═'.repeat(60)}`);
82+
const info = syntaxHighlighter.getLoadedLanguagesInfo();
83+
console.log(`Languages loaded: ${info.count}`);
84+
console.log(`List: ${info.languages.join(', ')}`);
85+
console.log('');
86+
87+
// Show available themes
88+
console.log(`${'═'.repeat(60)}`);
89+
console.log('🎨 Available Themes');
90+
console.log(`${'═'.repeat(60)}`);
91+
const themes = ['okaidia', 'tomorrow', 'twilight', 'dark', 'coy', 'prism', 'solarizelight', 'funky'];
92+
themes.forEach(theme => console.log(` • ${theme}`));
93+
console.log('');
94+
95+
// Compare themes side-by-side
96+
const sampleCode = 'const x = "Hello";';
97+
console.log(`${'═'.repeat(60)}`);
98+
console.log('🎨 Theme Comparison (same JavaScript code)');
99+
console.log(`${'═'.repeat(60)}`);
100+
101+
['okaidia', 'tomorrow', 'solarizelight'].forEach(theme => {
102+
console.log(`\n Theme: ${theme}`);
103+
console.log(` ${'-'.repeat(40)}`);
104+
console.log(' ' + syntaxHighlighter.highlight(sampleCode, 'js', theme).split('\n').join('\n '));
105+
});
106+
107+
console.log('\n✨ All syntax highlighting rendered with ANSI colors!\n');

0 commit comments

Comments
 (0)