Skip to content

Commit 1df4ae9

Browse files
yusanshiyusanshi
committed
Support latex
1 parent 9575afb commit 1df4ae9

File tree

3 files changed

+53
-24
lines changed

3 files changed

+53
-24
lines changed

‎404.html

+18-12
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
<body>
3636
<main role="main" class="container my-5">
3737
<h1>emgithub</h1>
38-
<p class="lead">Embed a file from Github repository just like <a target="_blank"
39-
href="https://gist.github.com/">Github Gist</a>. See <a target="_blank"
38+
<p class="lead">Embed a file from GitHub repository just like <a target="_blank"
39+
href="https://gist.github.com/">GitHub Gist</a>. See <a target="_blank"
4040
href="https://github.com/yusanshi/emgithub">the GitHub repository</a> for details.</p>
4141
<form id="goForm" class="my-4">
4242
<div class="input-group input-group-lg has-validation my-2">
@@ -311,6 +311,14 @@ <h1>emgithub</h1>
311311
<input type="checkbox" class="form-check-input" name="showLineNumbers" id="showLineNumbers" checked>
312312
<label class="form-check-label" for="showLineNumbers">Line numbers</label>
313313
</div>
314+
<div class="form-check form-check-inline">
315+
<input type="checkbox" class="form-check-input" name="showFileMeta" id="showFileMeta" checked>
316+
<label class="form-check-label" for="showFileMeta">File meta</label>
317+
</div>
318+
<div class="form-check form-check-inline">
319+
<input type="checkbox" class="form-check-input" name="showFullPath" id="showFullPath" checked>
320+
<label class="form-check-label" for="showFullPath">Full path in meta</label>
321+
</div>
314322
<div class="form-check form-check-inline">
315323
<input type="checkbox" class="form-check-input" name="showCopy" id="showCopy" checked>
316324
<label class="form-check-label" for="showCopy">Copy button</label>
@@ -330,14 +338,6 @@ <h1>emgithub</h1>
330338
</i>
331339
</label>
332340
</div>
333-
<div class="form-check form-check-inline">
334-
<input type="checkbox" class="form-check-input" name="showFileMeta" id="showFileMeta" checked>
335-
<label class="form-check-label" for="showFileMeta">File meta</label>
336-
</div>
337-
<div class="form-check form-check-inline">
338-
<input type="checkbox" class="form-check-input" name="showFullPath" id="showFullPath" checked>
339-
<label class="form-check-label" for="showFullPath">Full path in meta</label>
340-
</div>
341341
</form>
342342

343343
<label for="embededCode" class="form-label">Code to embed</label>
@@ -444,7 +444,8 @@ <h1>emgithub</h1>
444444
// Save current options using localStorage
445445
['showBorder', 'showLineNumbers', 'showFileMeta', 'showFullPath', 'showCopy', 'fetchFromJsDelivr'].forEach(e => {
446446
const element = document.getElementById(e);
447-
if (!element.disabled) {
447+
if (!element.parentElement.classList.contains('d-none')) {
448+
// Only save the non-hidden options
448449
const newValue = element.checked ? 'true' : 'false';
449450
localStorage.setItem(e, newValue);
450451
}
@@ -539,7 +540,12 @@ <h1>emgithub</h1>
539540
function toggleCheckStatus() {
540541
const typeSelect = document.querySelector('#type');
541542
['showLineNumbers', 'showCopy'].forEach(e => {
542-
document.getElementById(e).toggleAttribute("disabled", !(typeSelect.value == 'code'));
543+
const check = document.getElementById(e).parentElement;
544+
if (typeSelect.value == 'code') {
545+
check.classList.remove('d-none');
546+
} else {
547+
check.classList.add('d-none');
548+
}
543549
});
544550
}
545551

‎README.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
https://emgithub.com/
44

5-
Embed a file from Github repository just like [Github Gist](https://gist.github.com/).
5+
Embed a file from GitHub repository just like [GitHub Gist](https://gist.github.com/).
66

77
## Get started
88

@@ -16,8 +16,8 @@ There are two ways to use the service:
1616
- Support permanent links to [a file](https://docs.github.com/en/github/managing-files-in-a-repository/getting-permanent-links-to-files) or [a code snippet](https://docs.github.com/en/github/managing-your-work-on-github/creating-a-permanent-link-to-a-code-snippet) (use `#` to slice code).
1717

1818
- Specify TAB width with `?ts=`. Note when used together with code slicing, you should combine them like this: `?ts=2#L4-L12`.
19-
- Support Markdown (`*.md`) and Jupyter Notebook (`*.ipynb`) rendering, although currently LaTeX is not supported.
20-
- If the preview in https://emgithub.com/ is OK but it looks strange when embedded into the target web page, chances are that the style is override by the target web page. In this case, you may need to write some CSS styles to fix it (and `!important` may be needed). Below is the skeleton for embedding which may be helpful for writing CSS styles.
19+
- Support Markdown (`*.md`) and Jupyter Notebook (`*.ipynb`) rendering.
20+
- If the preview in https://emgithub.com/ is OK but it looks strange when embedded into the target web page, chances are that the styles are overridden by the target web page. In this case, you may need to write some CSS styles to fix it (and `!important` may be needed). Below is the skeleton for embedding which may be helpful for writing CSS styles.
2121

2222
```html
2323
<div class="emgithub-container">
@@ -47,8 +47,6 @@ There are two ways to use the service:
4747

4848
## Development
4949

50-
### Test
51-
5250
You can modify the code and test it by launching an HTTP server in the project directory.
5351

5452
1. Launch an HTTP server.

‎embed-v2.js

+32-7
Original file line numberDiff line numberDiff line change
@@ -343,9 +343,7 @@
343343
const loadHLJSStyle = fetch(`https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/${style}.min.css`)
344344
.then((response) => response.text())
345345
.then((text) => {
346-
const styleElement = document.createElement('style');
347-
styleElement.textContent = scopeCss(text, '.' + styleClassName);
348-
document.head.appendChild(styleElement);
346+
insertStyle(scopeCss(text, '.' + styleClassName));
349347
});
350348

351349
promises.push(loadHLJSNum);
@@ -356,12 +354,22 @@
356354
const loadMarkdownStyle = fetch('https://cdn.jsdelivr.net/gh/sindresorhus/[email protected]/github-markdown-light.min.css')
357355
.then((response) => response.text())
358356
.then((text) => {
359-
const styleElement = document.createElement('style');
360-
styleElement.textContent = text;
361-
document.head.appendChild(styleElement);
357+
insertStyle(text);
362358
});
359+
360+
const loadKatexStyle = fetch('https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css')
361+
.then((response) => response.text())
362+
.then((text) => {
363+
insertStyle(text.replaceAll('url(fonts/', 'url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/'));
364+
});
365+
// TODO: is the 'defer' making sense?
366+
const loadKatex = typeof katex != "undefined" ? Promise.resolve() : loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js', defer = true);
367+
const loadKatexAutoRender = loadKatex.then(() => typeof renderMathInElement != "undefined" ? Promise.resolve() : loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js', defer = true));
368+
363369
promises.push(loadMarked);
364370
promises.push(loadMarkdownStyle);
371+
promises.push(loadKatexStyle);
372+
promises.push(loadKatexAutoRender);
365373

366374
if (type === 'ipynb') {
367375
const loadAnsiUp = typeof AnsiUp != "undefined" ? Promise.resolve() : loadScript('https://cdn.jsdelivr.net/gh/drudru/[email protected]/ansi_up.min.js');
@@ -372,6 +380,7 @@
372380
const ansi_up = new AnsiUp();
373381
// bind 'this' to fix 'TypeError: this.append_buffer is not a function'
374382
nb.ansi = ansi_up.ansi_to_html.bind(ansi_up);
383+
// or: nb.ansi = (text) => { ansi_up.ansi_to_html(text); };
375384
});
376385
promises.push(loadNotebookjs);
377386
}
@@ -438,6 +447,15 @@
438447
targetDiv.querySelectorAll("pre code").forEach(codeTag => {
439448
hljs.highlightElement(codeTag);
440449
});
450+
renderMathInElement(targetDiv.querySelector(".html-area"), {
451+
delimiters: [
452+
{ left: '$$', right: '$$', display: true },
453+
{ left: '$', right: '$', display: false },
454+
{ left: '\\(', right: '\\)', display: false },
455+
{ left: '\\[', right: '\\]', display: true },
456+
],
457+
throwOnError: false
458+
});
441459
}
442460

443461
targetDiv.querySelector(".lds-ring").style.display = "none";
@@ -448,16 +466,23 @@
448466

449467

450468

451-
function loadScript(src) {
469+
function loadScript(src, defer = false) {
452470
return new Promise((resolve, reject) => {
453471
const script = document.createElement('script');
454472
script.src = src;
473+
script.defer = defer;
455474
script.onload = resolve;
456475
script.onerror = reject;
457476
document.head.appendChild(script);
458477
});
459478
}
460479

480+
function insertStyle(text) {
481+
const styleElement = document.createElement('style');
482+
styleElement.textContent = text;
483+
document.head.appendChild(styleElement);
484+
}
485+
461486
// https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
462487
function copyTextToClipboard(text) {
463488
if (!navigator.clipboard) {

0 commit comments

Comments
 (0)