Benjamin Woodruff
7f761b5b9e
I did a bunch of testing of various ansi escape codes (including italics) with all three char atlas implementations (none, static, dynamic), with and without `drawBoldTextInBrightColors`, and with and without `enableBold` to test all of the edge cases that I could.
96 lines
3.7 KiB
HTML
96 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>xterm.js demo</title>
|
|
<link rel="stylesheet" href="/build/xterm.css" />
|
|
<link rel="stylesheet" href="/build/addons/fullscreen/fullscreen.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
|
|
<div id="terminal-container"></div>
|
|
<div>
|
|
<h2>Actions</h2>
|
|
<p>
|
|
<label>Find next <input id="find-next"/></label>
|
|
<label>Find previous <input id="find-previous"/></label>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h2>Options</h2>
|
|
<p>
|
|
<label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
|
|
</p>
|
|
<p>
|
|
<label><input type="checkbox" id="option-mac-option-is-meta"> macOptionIsMeta</label>
|
|
</p>
|
|
<p>
|
|
<label><input type="checkbox" id="option-transparency"> transparency</label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
cursorStyle
|
|
<select id="option-cursor-style">
|
|
<option value="block">block</option>
|
|
<option value="underline">underline</option>
|
|
<option value="bar">bar</option>
|
|
</select>
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
bellStyle
|
|
<select id="option-bell-style">
|
|
<option value="">none</option>
|
|
<option value="sound">sound</option>
|
|
<option value="visual">visual</option>
|
|
<option value="both">both</option>
|
|
</select>
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<label>scrollback <input type="number" id="option-scrollback" value="1000" /></label>
|
|
</p>
|
|
<p>
|
|
<label>tabStopWidth <input type="number" id="option-tabstopwidth" value="8" /></label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
experimentalCharAtlas
|
|
<select id="option-experimental-char-atlas">
|
|
<option value="static" selected>static</option>
|
|
<option value="dynamic">dynamic</option>
|
|
<option value="none">none</option>
|
|
</select>
|
|
</label>
|
|
</p>
|
|
<div>
|
|
<h3>Size</h3>
|
|
<div>
|
|
<div style="display: inline-block; margin-right: 16px;">
|
|
<label for="cols">Columns</label>
|
|
<input type="number" id="cols" />
|
|
</div>
|
|
<div style="display: inline-block; margin-right: 16px;">
|
|
<label for="rows">Rows</label>
|
|
<input type="number" id="rows" />
|
|
</div>
|
|
<div style="display: inline-block; margin-right: 16px;">
|
|
<label for="padding">Padding</label>
|
|
<input type="number" id="padding" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Accessibility</h3>
|
|
<p>
|
|
<label><input type="checkbox" id="option-screen-reader-mode"> screenReaderMode</label>
|
|
</p>
|
|
</div>
|
|
<p><strong>Attention:</strong> The demo is a barebones implementation and is designed for the development and evaluation of xterm.js only. Exposing the demo to the public as is would introduce security risks for the host.</p>
|
|
<script src="dist/bundle.js" defer ></script>
|
|
</body>
|
|
</html>
|