
jsStack.js is a jQuery based syntax highlighter for JavaScript stack traces that enable you to highlight the column, line number and file name with your own styles.
See also:
How to use it:
1. Download and put the jsStack.js after the latest jQuery library.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="jsStack.js"></script>
2. Wrap the JavaScript stack traces in the pre
or code
tag.
<pre id="example" class="stacktrace"> jsStack.js:93 Uncaught ReferenceError: jQuery is not defined at jsStack.js:93 index.html:26 Uncaught ReferenceError: $ is not defined at index.html:26 </pre>
3. Initialize the jQuery jsStack.js pluglin.
$('.stacktrace').jsStack();
4. Apply your own styles to the JavaScript stack traces.
pre { padding: 20px 10px; background-color: #333; color: #ffffff; } .st-methodName { color: #70c9ba; font-weight: bolder; } .st-column { color: #f8b068; } .st-lineNumber { color: #ff4f68; } .st-fileName { color: #85dbff; }
5. You can change the default CSS selectors by overriding the options on init.
$('.stacktrace').jsStack({ method: 'st-methodName', file: 'st-fileName', line: 'st-lineNumber', column: 'st-column' });
This awesome jQuery plugin is developed by ZsharE. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 23.08.2018
- Source