mirror of
https://github.com/sern-handler/website
synced 2026-06-28 02:32:23 +00:00
feat: migrate to starlight
This commit is contained in:
68
node_modules/marked-footnote/changelog.md
generated
vendored
Normal file
68
node_modules/marked-footnote/changelog.md
generated
vendored
Normal file
@@ -0,0 +1,68 @@
|
||||
## marked-footnote [1.2.2](https://github.com/bent10/marked-extensions/compare/marked-footnote@1.2.1...marked-footnote@1.2.2) (2023-12-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* ensure the footnotes token is consistently reset during each parsing process ([6f4d6d9](https://github.com/bent10/marked-extensions/commit/6f4d6d9a4b86740d75c0a992abffebd64281085c)), closes [#34](https://github.com/bent10/marked-extensions/issues/34)
|
||||
|
||||
## marked-footnote [1.2.1](https://github.com/bent10/marked-extensions/compare/marked-footnote@1.2.0...marked-footnote@1.2.1) (2023-12-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* preserve the value of the first token by leaving a space to ensure that the subsequent item is properly accessed ([3e26ab5](https://github.com/bent10/marked-extensions/commit/3e26ab5d0fe7e0f23fb28d5550372ff1cbb43aa4)), closes [#27](https://github.com/bent10/marked-extensions/issues/27)
|
||||
* reset refs number on each parsing ([d72b9da](https://github.com/bent10/marked-extensions/commit/d72b9da07e684ea091546fd6960c0e404d6eebcd)), closes [#28](https://github.com/bent10/marked-extensions/issues/28)
|
||||
|
||||
# marked-footnote [1.2.0](https://github.com/bent10/marked-extensions/compare/marked-footnote@1.1.3...marked-footnote@1.2.0) (2023-12-11)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* use sequential number for footnote refs and resolve footnote order ([1d53da3](https://github.com/bent10/marked-extensions/commit/1d53da3d285107f353cd7c2237df3f22ee4343bc)), closes [#26](https://github.com/bent10/marked-extensions/issues/26)
|
||||
|
||||
## marked-footnote [1.1.3](https://github.com/bent10/marked-extensions/compare/marked-footnote@1.1.2...marked-footnote@1.1.3) (2023-11-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* allows link in footnote content ([a3e49ac](https://github.com/bent10/marked-extensions/commit/a3e49acc0344d33525181639bbe55aa5aa11024d)), closes [#23](https://github.com/bent10/marked-extensions/issues/23)
|
||||
|
||||
## marked-footnote [1.1.2](https://github.com/bent10/marked-extensions/compare/marked-footnote@1.1.1...marked-footnote@1.1.2) (2023-11-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* always begin with empty footnotes items ([94aa01a](https://github.com/bent10/marked-extensions/commit/94aa01a0a571d9f04900e06fb0fa2e2baf021337))
|
||||
|
||||
## marked-footnote [1.1.1](https://github.com/bent10/marked-extensions/compare/marked-footnote@1.1.0...marked-footnote@1.1.1) (2023-10-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* resolves `ERR_REQUIRE_ESM` in CommonJS mocules ([f876e00](https://github.com/bent10/marked-extensions/commit/f876e00dcd08969cf1489b7fc23c29a7e2e67d96))
|
||||
|
||||
# marked-footnote [1.1.0](https://github.com/bent10/marked-extensions/compare/marked-footnote@1.0.1...marked-footnote@1.1.0) (2023-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* resolves `umd` mime issue ([f98d31a](https://github.com/bent10/marked-extensions/commit/f98d31af547deb496098a54d836a55625e05040e))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* build for the `esm`, `cjs`, and `umd` formats ([30bc148](https://github.com/bent10/marked-extensions/commit/30bc148b037aaff23dee1ecca64d31c8b4ae827c))
|
||||
|
||||
## marked-footnote [1.0.1](https://github.com/bent10/marked-extensions/compare/marked-footnote@1.0.0...marked-footnote@1.0.1) (2023-10-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* removes the "dir" attribute from the footnotes heading ([152f77e](https://github.com/bent10/marked-extensions/commit/152f77ee4bd16a39736fa68aaeccec9d5a49daef))
|
||||
|
||||
# marked-footnote 1.0.0 (2023-10-10)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* init `marked-footnote` ([dba2ad2](https://github.com/bent10/marked-extensions/commit/dba2ad2d265c62335198436965c9118d6da3381d))
|
||||
6
node_modules/marked-footnote/dist/footnote.d.ts
generated
vendored
Normal file
6
node_modules/marked-footnote/dist/footnote.d.ts
generated
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import type { TokenizerAndRendererExtension } from 'marked';
|
||||
import type { LexerTokens } from './types.js';
|
||||
/**
|
||||
* Returns an extension object for parsing footnote definitions.
|
||||
*/
|
||||
export declare function createFootnote(lexer: LexerTokens, description: string): TokenizerAndRendererExtension;
|
||||
5
node_modules/marked-footnote/dist/footnotes.d.ts
generated
vendored
Normal file
5
node_modules/marked-footnote/dist/footnotes.d.ts
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
import type { RendererExtension } from 'marked';
|
||||
/**
|
||||
* Returns an extension object for rendering the list of footnotes.
|
||||
*/
|
||||
export declare function createFootnotes(prefixId: string): RendererExtension;
|
||||
15
node_modules/marked-footnote/dist/index.cjs
generated
vendored
Normal file
15
node_modules/marked-footnote/dist/index.cjs
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
"use strict";function p(t,l){const o={type:"footnotes",raw:l,rawItems:[],items:[]};return{name:"footnote",level:"block",childTokens:["content"],tokenizer(r){t.hasFootnotes||(this.lexer.tokens.push(o),t.tokens=this.lexer.tokens,t.hasFootnotes=!0,o.rawItems=[],o.items=[]);const e=/^\[\^([^\]\n]+)\]:(?:[ \t]+|[\n]*?|$)([^\n]*?(?:\n|$)(?:\n*?[ ]{4,}[^\n]*)*)/.exec(r);if(e){const[n,i,h=""]=e;let f=h.split(`
|
||||
`).reduce((c,s)=>c+`
|
||||
`+s.replace(/^(?:[ ]{4}|[\t])/,""),"");const u=f.trimEnd().split(`
|
||||
`).pop();f+=u&&/^[ \t]*?[>\-\*][ ]|[`]{3,}$|^[ \t]*?[\|].+[\|]$/.test(u)?`
|
||||
|
||||
`:"";const a={type:"footnote",raw:n,label:i,refs:[],content:this.lexer.blockTokens(f)};return o.rawItems.push(a),a}},renderer(){return""}}}function $(t,l=!1){let o=0;return{name:"footnoteRef",level:"inline",tokenizer(r){const e=/^\[\^([^\]\n]+)\]/.exec(r);if(e){const[n,i]=e,h=this.lexer.tokens[0],f=h.rawItems.filter(s=>s.label===i);if(!f.length)return;const u=f[0],a=h.items.filter(s=>s.label===i)[0],c={type:"footnoteRef",raw:n,id:"",label:i};return a?(c.id=`${o}:${a.refs.length+1}`,a.refs.push(c)):(o++,c.id=String(o),u.refs.push(c),h.items.push(u)),c}},renderer({id:r,label:e}){o=0;const n=encodeURIComponent(e);return`<sup><a id="${t}ref-${n}" href="#${t+n}" data-${t}ref aria-describedby="${t}label">${l?`[${r}]`:r}</a></sup>`}}}function m(t){return{name:"footnotes",renderer({raw:l,items:o=[]}){if(o.length===0)return"";const r=o.reduce((n,{label:i,content:h,refs:f})=>{const u=encodeURIComponent(i),a=this.parser.parse(h).trimEnd(),c=a.endsWith("</p>");let s=`<li id="${t+u}">
|
||||
`;return s+=c?a.replace(/<\/p>$/,""):a,f.forEach((b,d)=>{s+=` <a href="#${t}ref-${u}" data-${t}backref aria-label="Back to reference ${i}">${d>0?`↩<sup>${d+1}</sup>`:"↩"}</a>`}),s+=c?`</p>
|
||||
`:`
|
||||
`,s+=`</li>
|
||||
`,n+s},"");let e=`<section class="footnotes" data-footnotes>
|
||||
`;return e+=`<h2 id="${t}label" class="sr-only">${l.trimEnd()}</h2>
|
||||
`,e+=`<ol>
|
||||
${r}</ol>
|
||||
`,e+=`</section>
|
||||
`,e}}}function k(t={}){const{prefixId:l="footnote-",description:o="Footnotes",refMarkers:r}=t,e={hasFootnotes:!1,tokens:[]};return{extensions:[p(e,o),$(l,r),m(l)],walkTokens(n){n.type==="footnotes"&&e.tokens.indexOf(n)===0&&n.items.length&&(e.tokens[0]={type:"space",raw:""},e.tokens.push(n)),e.hasFootnotes&&(e.hasFootnotes=!1)}}}module.exports=k;
|
||||
7
node_modules/marked-footnote/dist/index.d.ts
generated
vendored
Normal file
7
node_modules/marked-footnote/dist/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { MarkedExtension } from 'marked';
|
||||
import type { Options } from './types.js';
|
||||
/**
|
||||
* A [marked](https://marked.js.org/) extension to support [GFM footnotes](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#footnotes).
|
||||
*/
|
||||
export default function markedFootnote(options?: Options): MarkedExtension;
|
||||
export type { Footnote, FootnoteRef, Footnotes, Options } from './types.js';
|
||||
123
node_modules/marked-footnote/dist/index.js
generated
vendored
Normal file
123
node_modules/marked-footnote/dist/index.js
generated
vendored
Normal file
@@ -0,0 +1,123 @@
|
||||
function p(t, l) {
|
||||
const o = {
|
||||
type: "footnotes",
|
||||
raw: l,
|
||||
rawItems: [],
|
||||
items: []
|
||||
};
|
||||
return {
|
||||
name: "footnote",
|
||||
level: "block",
|
||||
childTokens: ["content"],
|
||||
tokenizer(r) {
|
||||
t.hasFootnotes || (this.lexer.tokens.push(o), t.tokens = this.lexer.tokens, t.hasFootnotes = !0, o.rawItems = [], o.items = []);
|
||||
const e = /^\[\^([^\]\n]+)\]:(?:[ \t]+|[\n]*?|$)([^\n]*?(?:\n|$)(?:\n*?[ ]{4,}[^\n]*)*)/.exec(
|
||||
r
|
||||
);
|
||||
if (e) {
|
||||
const [n, i, h = ""] = e;
|
||||
let f = h.split(`
|
||||
`).reduce((c, s) => c + `
|
||||
` + s.replace(/^(?:[ ]{4}|[\t])/, ""), "");
|
||||
const u = f.trimEnd().split(`
|
||||
`).pop();
|
||||
f += // add lines after list, blockquote, codefence, and table
|
||||
u && /^[ \t]*?[>\-\*][ ]|[`]{3,}$|^[ \t]*?[\|].+[\|]$/.test(
|
||||
u
|
||||
) ? `
|
||||
|
||||
` : "";
|
||||
const a = {
|
||||
type: "footnote",
|
||||
raw: n,
|
||||
label: i,
|
||||
refs: [],
|
||||
content: this.lexer.blockTokens(f)
|
||||
};
|
||||
return o.rawItems.push(a), a;
|
||||
}
|
||||
},
|
||||
renderer() {
|
||||
return "";
|
||||
}
|
||||
};
|
||||
}
|
||||
function $(t, l = !1) {
|
||||
let o = 0;
|
||||
return {
|
||||
name: "footnoteRef",
|
||||
level: "inline",
|
||||
tokenizer(r) {
|
||||
const e = /^\[\^([^\]\n]+)\]/.exec(r);
|
||||
if (e) {
|
||||
const [n, i] = e, h = this.lexer.tokens[0], f = h.rawItems.filter(
|
||||
(s) => s.label === i
|
||||
);
|
||||
if (!f.length)
|
||||
return;
|
||||
const u = f[0], a = h.items.filter((s) => s.label === i)[0], c = {
|
||||
type: "footnoteRef",
|
||||
raw: n,
|
||||
id: "",
|
||||
label: i
|
||||
};
|
||||
return a ? (c.id = `${o}:${a.refs.length + 1}`, a.refs.push(c)) : (o++, c.id = String(o), u.refs.push(c), h.items.push(u)), c;
|
||||
}
|
||||
},
|
||||
renderer({ id: r, label: e }) {
|
||||
o = 0;
|
||||
const n = encodeURIComponent(e);
|
||||
return `<sup><a id="${t}ref-${n}" href="#${t + n}" data-${t}ref aria-describedby="${t}label">${l ? `[${r}]` : r}</a></sup>`;
|
||||
}
|
||||
};
|
||||
}
|
||||
function m(t) {
|
||||
return {
|
||||
name: "footnotes",
|
||||
renderer({ raw: l, items: o = [] }) {
|
||||
if (o.length === 0)
|
||||
return "";
|
||||
const r = o.reduce(
|
||||
(n, { label: i, content: h, refs: f }) => {
|
||||
const u = encodeURIComponent(i), a = this.parser.parse(h).trimEnd(), c = a.endsWith("</p>");
|
||||
let s = `<li id="${t + u}">
|
||||
`;
|
||||
return s += c ? a.replace(/<\/p>$/, "") : a, f.forEach((k, d) => {
|
||||
s += ` <a href="#${t}ref-${u}" data-${t}backref aria-label="Back to reference ${i}">${d > 0 ? `↩<sup>${d + 1}</sup>` : "↩"}</a>`;
|
||||
}), s += c ? `</p>
|
||||
` : `
|
||||
`, s += `</li>
|
||||
`, n + s;
|
||||
},
|
||||
""
|
||||
);
|
||||
let e = `<section class="footnotes" data-footnotes>
|
||||
`;
|
||||
return e += `<h2 id="${t}label" class="sr-only">${l.trimEnd()}</h2>
|
||||
`, e += `<ol>
|
||||
${r}</ol>
|
||||
`, e += `</section>
|
||||
`, e;
|
||||
}
|
||||
};
|
||||
}
|
||||
function b(t = {}) {
|
||||
const {
|
||||
prefixId: l = "footnote-",
|
||||
description: o = "Footnotes",
|
||||
refMarkers: r
|
||||
} = t, e = { hasFootnotes: !1, tokens: [] };
|
||||
return {
|
||||
extensions: [
|
||||
p(e, o),
|
||||
$(l, r),
|
||||
m(l)
|
||||
],
|
||||
walkTokens(n) {
|
||||
n.type === "footnotes" && e.tokens.indexOf(n) === 0 && n.items.length && (e.tokens[0] = { type: "space", raw: "" }, e.tokens.push(n)), e.hasFootnotes && (e.hasFootnotes = !1);
|
||||
}
|
||||
};
|
||||
}
|
||||
export {
|
||||
b as default
|
||||
};
|
||||
15
node_modules/marked-footnote/dist/index.umd.js
generated
vendored
Normal file
15
node_modules/marked-footnote/dist/index.umd.js
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
(function(h,p){typeof exports=="object"&&typeof module<"u"?module.exports=p():typeof define=="function"&&define.amd?define(p):(h=typeof globalThis<"u"?globalThis:h||self,h.markedFootnote=p())})(this,function(){"use strict";function h(t,c){const n={type:"footnotes",raw:c,rawItems:[],items:[]};return{name:"footnote",level:"block",childTokens:["content"],tokenizer(r){t.hasFootnotes||(this.lexer.tokens.push(n),t.tokens=this.lexer.tokens,t.hasFootnotes=!0,n.rawItems=[],n.items=[]);const e=/^\[\^([^\]\n]+)\]:(?:[ \t]+|[\n]*?|$)([^\n]*?(?:\n|$)(?:\n*?[ ]{4,}[^\n]*)*)/.exec(r);if(e){const[o,f,u=""]=e;let l=u.split(`
|
||||
`).reduce((i,s)=>i+`
|
||||
`+s.replace(/^(?:[ ]{4}|[\t])/,""),"");const d=l.trimEnd().split(`
|
||||
`).pop();l+=d&&/^[ \t]*?[>\-\*][ ]|[`]{3,}$|^[ \t]*?[\|].+[\|]$/.test(d)?`
|
||||
|
||||
`:"";const a={type:"footnote",raw:o,label:f,refs:[],content:this.lexer.blockTokens(l)};return n.rawItems.push(a),a}},renderer(){return""}}}function p(t,c=!1){let n=0;return{name:"footnoteRef",level:"inline",tokenizer(r){const e=/^\[\^([^\]\n]+)\]/.exec(r);if(e){const[o,f]=e,u=this.lexer.tokens[0],l=u.rawItems.filter(s=>s.label===f);if(!l.length)return;const d=l[0],a=u.items.filter(s=>s.label===f)[0],i={type:"footnoteRef",raw:o,id:"",label:f};return a?(i.id=`${n}:${a.refs.length+1}`,a.refs.push(i)):(n++,i.id=String(n),d.refs.push(i),u.items.push(d)),i}},renderer({id:r,label:e}){n=0;const o=encodeURIComponent(e);return`<sup><a id="${t}ref-${o}" href="#${t+o}" data-${t}ref aria-describedby="${t}label">${c?`[${r}]`:r}</a></sup>`}}}function $(t){return{name:"footnotes",renderer({raw:c,items:n=[]}){if(n.length===0)return"";const r=n.reduce((o,{label:f,content:u,refs:l})=>{const d=encodeURIComponent(f),a=this.parser.parse(u).trimEnd(),i=a.endsWith("</p>");let s=`<li id="${t+d}">
|
||||
`;return s+=i?a.replace(/<\/p>$/,""):a,l.forEach((b,m)=>{s+=` <a href="#${t}ref-${d}" data-${t}backref aria-label="Back to reference ${f}">${m>0?`↩<sup>${m+1}</sup>`:"↩"}</a>`}),s+=i?`</p>
|
||||
`:`
|
||||
`,s+=`</li>
|
||||
`,o+s},"");let e=`<section class="footnotes" data-footnotes>
|
||||
`;return e+=`<h2 id="${t}label" class="sr-only">${c.trimEnd()}</h2>
|
||||
`,e+=`<ol>
|
||||
${r}</ol>
|
||||
`,e+=`</section>
|
||||
`,e}}}function k(t={}){const{prefixId:c="footnote-",description:n="Footnotes",refMarkers:r}=t,e={hasFootnotes:!1,tokens:[]};return{extensions:[h(e,n),p(c,r),$(c)],walkTokens(o){o.type==="footnotes"&&e.tokens.indexOf(o)===0&&o.items.length&&(e.tokens[0]={type:"space",raw:""},e.tokens.push(o)),e.hasFootnotes&&(e.hasFootnotes=!1)}}}return k});
|
||||
5
node_modules/marked-footnote/dist/references.d.ts
generated
vendored
Normal file
5
node_modules/marked-footnote/dist/references.d.ts
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
import type { TokenizerAndRendererExtension } from 'marked';
|
||||
/**
|
||||
* Returns an extension object for parsing inline footnote references.
|
||||
*/
|
||||
export declare function createFootnoteRef(prefixId: string, refMarkers?: boolean): TokenizerAndRendererExtension;
|
||||
57
node_modules/marked-footnote/dist/types.d.ts
generated
vendored
Normal file
57
node_modules/marked-footnote/dist/types.d.ts
generated
vendored
Normal file
@@ -0,0 +1,57 @@
|
||||
import type { Token } from 'marked';
|
||||
/**
|
||||
* Represents the options for the `markedFootnote` function.
|
||||
*/
|
||||
export interface Options {
|
||||
/**
|
||||
* The prefix ID for footnotes.
|
||||
*
|
||||
* @default 'footnote-'
|
||||
*/
|
||||
prefixId?: string;
|
||||
/**
|
||||
* The description of footnotes, used by `aria-labeledby` attribute.
|
||||
*
|
||||
* @default 'Footnotes'
|
||||
*/
|
||||
description?: string;
|
||||
/**
|
||||
* If set to `true`, it will place footnote reference in square brackets, like this:
|
||||
* `[1]`.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
refMarkers?: boolean;
|
||||
}
|
||||
/**
|
||||
* Represents a collection of footnotes.
|
||||
*/
|
||||
export type Footnotes = {
|
||||
type: 'footnotes';
|
||||
raw: string;
|
||||
rawItems: Footnote[];
|
||||
items: Footnote[];
|
||||
};
|
||||
/**
|
||||
* Represents a single footnote.
|
||||
*/
|
||||
export type Footnote = {
|
||||
type: 'footnote';
|
||||
raw: string;
|
||||
label: string;
|
||||
refs: FootnoteRef[];
|
||||
content: Token[];
|
||||
};
|
||||
/**
|
||||
* Represents a reference to a footnote.
|
||||
*/
|
||||
export type FootnoteRef = {
|
||||
type: 'footnoteRef';
|
||||
raw: string;
|
||||
id: string;
|
||||
label: string;
|
||||
};
|
||||
export type LexerTokens = {
|
||||
hasFootnotes: boolean;
|
||||
tokens: Token[];
|
||||
};
|
||||
49
node_modules/marked-footnote/package.json
generated
vendored
Normal file
49
node_modules/marked-footnote/package.json
generated
vendored
Normal file
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "marked-footnote",
|
||||
"description": "A marked extension to support GFM footnotes",
|
||||
"version": "1.2.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"author": "Beni Arisandi (https://stilearning.com)",
|
||||
"repository": "https://github.com/bent10/marked-extensions",
|
||||
"homepage": "https://github.com/bent10/marked-extensions/tree/main/packages/footnote",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"marked",
|
||||
"marked-extension",
|
||||
"gfm",
|
||||
"footnote",
|
||||
"stilearning-marked-extensions"
|
||||
],
|
||||
"type": "module",
|
||||
"main": "./dist/index.cjs",
|
||||
"browser": "./dist/index.umd.js",
|
||||
"module": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.js",
|
||||
"require": "./dist/index.cjs",
|
||||
"types": "./dist/index.d.ts"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"changelog.md",
|
||||
"readme.md"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite build --watch",
|
||||
"build": "vite build && npm run types",
|
||||
"test": "vitest",
|
||||
"coverage": "vitest run --coverage",
|
||||
"types": "tsc -d --emitDeclarationOnly --outDir ./dist",
|
||||
"lint": "tsc --noEmit && eslint . --cache --cache-location ../../node_modules/.eslint",
|
||||
"format": "prettier . --write --cache-location ../../node_modules/.prettier --ignore-path ../../.prettierignore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"marked": ">=7.0.0"
|
||||
}
|
||||
}
|
||||
325
node_modules/marked-footnote/readme.md
generated
vendored
Normal file
325
node_modules/marked-footnote/readme.md
generated
vendored
Normal file
@@ -0,0 +1,325 @@
|
||||
# marked-footnote
|
||||
|
||||
A [marked](https://marked.js.org/) extension to support [GFM footnotes](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#footnotes).
|
||||
|
||||
- [Install](#install)
|
||||
- [Usage](#usage)
|
||||
- [Browser](#browser)
|
||||
- [Node.js](#nodejs)
|
||||
- [Options](#options)
|
||||
- [Limitations](#limitations)
|
||||
- [Related](#related)
|
||||
- [Contributing](#contributing)
|
||||
- [License](#license)
|
||||
|
||||
## Install
|
||||
|
||||
You can install `marked-footnote` using npm or yarn:
|
||||
|
||||
```bash
|
||||
npm i marked-footnote
|
||||
# or
|
||||
yarn add marked-footnote
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Once you've installed this extension, you can use it in your marked configuration. Here's an example of how to configure it:
|
||||
|
||||
### Browser
|
||||
|
||||
Say we have the following file `example.html`:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Marked Footnote</title>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-light.min.css"
|
||||
integrity="sha512-bm684OXnsiNuQSyrxuuwo4PHqr3OzxPpXyhT66DA/fhl73e1JmBxRKGnO/nRwWvOZxJLRCmNH7FII+Yn1JNPmg=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
|
||||
<style>
|
||||
#content {
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
max-width: 928px;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
word-wrap: normal;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="markdown-body">
|
||||
<div id="content"></div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked-footnote/dist/index.umd.min.js"></script>
|
||||
<script>
|
||||
const md = `# Example
|
||||
|
||||
[^1]: This is a footnote content.
|
||||
|
||||
Here is a simple footnote[^1]. With some additional text after it[^@#$%] and without disrupting the blocks[^bignote].
|
||||
|
||||
[^bignote]: The first paragraph of the definition.
|
||||
|
||||
Paragraph two of the definition.
|
||||
|
||||
> A blockquote with
|
||||
> multiple lines.
|
||||
|
||||
~~~
|
||||
a code block
|
||||
~~~
|
||||
|
||||
| Header 1 | Header 2 |
|
||||
| -------- | -------- |
|
||||
| Cell 1 | Cell 2 |
|
||||
|
||||
A \`final\` paragraph before list.
|
||||
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Subitem 1
|
||||
- Subitem 2
|
||||
|
||||
[^@#$%]: A footnote on the label: "@#$%".
|
||||
`
|
||||
|
||||
document.getElementById('content').innerHTML = new marked.Marked()
|
||||
.use(markedFootnote())
|
||||
.parse(md)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
[](https://untitled-0x6rqd9q0jep.runkit.sh/)
|
||||
|
||||
### Node.js
|
||||
|
||||
Say we have the following file `example.md`:
|
||||
|
||||
````md
|
||||
# Example
|
||||
|
||||
[^1]: This is a footnote content.
|
||||
|
||||
Here is a simple footnote[^1]. With some additional text after it[^@#$%] and without disrupting the blocks[^bignote].
|
||||
|
||||
[^bignote]: The first paragraph of the definition.
|
||||
|
||||
Paragraph two of the definition.
|
||||
|
||||
> A blockquote with
|
||||
> multiple lines.
|
||||
|
||||
```
|
||||
a code block
|
||||
```
|
||||
|
||||
| Header 1 | Header 2 |
|
||||
| -------- | -------- |
|
||||
| Cell 1 | Cell 2 |
|
||||
|
||||
A `final` paragraph before list.
|
||||
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Subitem 1
|
||||
- Subitem 2
|
||||
|
||||
[^@#$%]: A footnote on the label: "@#$%".
|
||||
````
|
||||
|
||||
> **Note:** The position of a footnote in your Markdown does not influence
|
||||
> where the footnote will be rendered. You can write a footnote right
|
||||
> after your reference to the footnote, and the footnote will still render
|
||||
> at the bottom of the Markdown.
|
||||
|
||||
And our module `example.js` looks as follows:
|
||||
|
||||
```js
|
||||
import { readFileSync } from 'node:fs'
|
||||
import { Marked } from 'marked'
|
||||
import markedFootnote from 'marked-footnote'
|
||||
|
||||
const html = new Marked()
|
||||
.use(markedFootnote())
|
||||
.parse(readFileSync('example.md', 'utf8'))
|
||||
|
||||
console.log(html)
|
||||
```
|
||||
|
||||
Now, running node `example.js` yields:
|
||||
|
||||
```html
|
||||
<h1>Example</h1>
|
||||
<p>
|
||||
Here is a simple footnote<sup
|
||||
><a
|
||||
id="footnote-ref-1"
|
||||
href="#footnote-1"
|
||||
data-footnote-ref
|
||||
aria-describedby="footnote-label"
|
||||
>1</a
|
||||
></sup
|
||||
>. With some additional text after it<sup
|
||||
><a
|
||||
id="footnote-ref-%40%23%24%25"
|
||||
href="#footnote-%40%23%24%25"
|
||||
data-footnote-ref
|
||||
aria-describedby="footnote-label"
|
||||
>2</a
|
||||
></sup
|
||||
>
|
||||
and without disrupting the blocks<sup
|
||||
><a
|
||||
id="footnote-ref-bignote"
|
||||
href="#footnote-bignote"
|
||||
data-footnote-ref
|
||||
aria-describedby="footnote-label"
|
||||
>3</a
|
||||
></sup
|
||||
>.
|
||||
</p>
|
||||
<section class="footnotes" data-footnotes>
|
||||
<h2 id="footnote-label" class="sr-only">Footnotes</h2>
|
||||
<ol>
|
||||
<li id="footnote-1">
|
||||
<p>
|
||||
This is a footnote content.
|
||||
<a
|
||||
href="#footnote-ref-1"
|
||||
data-footnote-backref
|
||||
aria-label="Back to reference 1"
|
||||
>↩</a
|
||||
>
|
||||
</p>
|
||||
</li>
|
||||
<li id="footnote-%40%23%24%25">
|
||||
<p>
|
||||
A footnote on the label: "@#$%".
|
||||
<a
|
||||
href="#footnote-ref-%40%23%24%25"
|
||||
data-footnote-backref
|
||||
aria-label="Back to reference @#$%"
|
||||
>↩</a
|
||||
>
|
||||
</p>
|
||||
</li>
|
||||
<li id="footnote-bignote">
|
||||
<p>The first paragraph of the definition.</p>
|
||||
<p>Paragraph two of the definition.</p>
|
||||
<blockquote>
|
||||
<p>A blockquote with multiple lines.</p>
|
||||
</blockquote>
|
||||
<pre><code>a code block
|
||||
</code></pre>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Header 1</th>
|
||||
<th>Header 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>A <code>final</code> paragraph before list.</p>
|
||||
<ul>
|
||||
<li>Item 1</li>
|
||||
<li>
|
||||
Item 2
|
||||
<ul>
|
||||
<li>Subitem 1</li>
|
||||
<li>Subitem 2</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a
|
||||
href="#footnote-ref-bignote"
|
||||
data-footnote-backref
|
||||
aria-label="Back to reference bignote"
|
||||
>↩</a
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
```
|
||||
|
||||
By default, this plugin does not place footnote markers in square brackets (`[1]`), instead like this: `1`. So you will need to add the style as shown below to your CSS:
|
||||
|
||||
```css
|
||||
[data-footnote-ref]::before {
|
||||
content: '[';
|
||||
}
|
||||
|
||||
[data-footnote-ref]::after {
|
||||
content: ']';
|
||||
}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
The marked-footnote extension accepts the following configuration options:
|
||||
|
||||
- `prefixId`: The prefix ID for footnotes. Defaults to `'footnote-'`.
|
||||
|
||||
- `description`: The description of footnotes, used by `aria-labeledby` attribute. Defaults to `'Footnotes'`.
|
||||
|
||||
- `refMarkers`: If set to `true`, it will place footnote reference in square brackets, like this: `[1]`. Defaults to `false`.
|
||||
|
||||
## Limitations
|
||||
|
||||
When considering the use of footnotes in your content, it's important to keep in mind the following accessibility and usability factors:
|
||||
|
||||
1. **Screen Reader Compatibility**: Screen readers may not effectively convey footnotes. They tend to read the footnote number without indicating that it's a footnote or using superscript. Additionally, they may not identify the link to the footnote text.
|
||||
2. **Accessibility Challenges**: Footnotes pose challenges for all users on a web page. To access them, one often needs to scroll to the end of the page, read the footnote, and then click back to the main content. Not everyone is aware that they should click on the footnote at the end, potentially causing them to lose their place. Moreover, if the same footnote is repeated multiple times, clicking on the link could lead to the wrong location.
|
||||
|
||||
## Related
|
||||
|
||||
See [extensions list](https://github.com/bent10/marked-extensions#packages).
|
||||
|
||||
## Contributing
|
||||
|
||||
We 💛 issues.
|
||||
|
||||
When committing, please conform to [the semantic-release commit standards](https://www.conventionalcommits.org/). Please install `commitizen` and the adapter globally, if you have not already.
|
||||
|
||||
```bash
|
||||
npm i -g commitizen cz-conventional-changelog
|
||||
```
|
||||
|
||||
Now you can use `git cz` or just `cz` instead of `git commit` when committing. You can also use `git-cz`, which is an alias for `cz`.
|
||||
|
||||
```bash
|
||||
git add . && git cz
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||

|
||||
|
||||
A project by [Stilearning](https://stilearning.com) © 2023.
|
||||
Reference in New Issue
Block a user