BibTeX or BibLaTeX like citation for HTML.
Brand new and (probably) full of bugs
-
Export your library from your favorite reference management software (e.g. Zotero) in the CSL-JSON format (Detailed Explanation).
-
Obtain the Javascript file of Bibcite (e.g. from JSDelivr) looking like this
https://cdn.jsdelivr.net/npm/bibcite@1.0/dist/bibcite.min.js
-
Assuming you have an exported
csl-jsonfile, which we are going to callreferences.jsonfrom now on (but you can use any other filename). And a link to the JS file ofbibcite(here calledbibcite.js) you can do the following in an html file<head> <script src="bibcite.js"></script> <bib-config bib="references.json"></bib-config> </head> <body> <p> This is an example of parenthical citation: <bib-cite key="id in references.json"></bib-cite> </p> <bib-references></bib-references> </body>
-
At the moment there are two citation-styles
alphabetic(default) andnumericyou can select them like this:<bib-config bib="references.json" citation-style="numeric"></bib-config>
-
There are three types of citations inspired by BibLaTeX
\textcite,\parenciteand\rawcite. You can set thetypeofbib-citeto eitherparen-cite(default)text-citeorraw-cite, e.g.<bib-cite key="id_key" type="text-cite"></bib-cite>
The following body
<h1>My Page</h1>
<p> The next two citations are <code>paren-cite</code> citations
<bib-cite type="paren-cite" key="mas-colellMicroeconomicTheory1995"></bib-cite>
<bib-cite type="paren-cite" key="amirEffectsEntryCournot2000"></bib-cite>.
</p>
<p>
The following is a <code>text-cite</code> allowing you to use the name in text
<bib-cite type="text-cite" key="mas-colellMicroeconomicTheory1995"></bib-cite>.
</p>
<p>
And the remaining two are <code>raw-cite</code>
<bib-cite type="raw-cite" key="amirEffectsEntryCournot2000"></bib-cite>
<bib-cite type="raw-cite" key="dsouzaParserExtractionTriples2018"></bib-cite>,
</p>
<bib-references></bib-references>depending on the selected style results in the following pages.
<bib-config bib="references.json" citation-style="alphabetic"></bib-config>
<bib-config bib="references.json" citation-style="numeric"></bib-config>
<bib-config bib="references.json" citation-style="author-year"></bib-config>
You can find bibcite on npm.
There will be a way to do customization in the future. Styles are Typescript types
// bibcite/styles/types.ts
export type CiteStyle = {
name: string;
order: BibOrder;
enclosing: [string, string];
multiSeparator: string;
identifier: (bib_data: Data,index: number, citeType: CiteType) => string;
bibEntry: (bib_data: Data) => string;
metaBibEntry: (bibEntry:string, identifier:string) => string;
metaReference: (content: string) => string;
};so the numeric style for example is implemented roughly like this:
//bibcite/styles/numeric.ts
export const numeric: CiteStyle = {
name: "numeric",
order: { comparison: insertion, inform_citations: true },
enclosing: ["[", "]"],
multiSeparator: ",",
identifier: (_: Data, index: number) => String(index),
bibEntry: defaultBibEntry,
metaBibEntry: (bibEntry:string, identifier:string) => `
<tr style="vertical-align:top">
<td>[${identifier}]</td>
<td>${bibEntry}</td>
</tr>
`,
metaReference: (content: string) =>
`<h2>References</h2>
<table>
${content}
</table>
`,
};and then added
//bibcite/ctyles/index.ts
addStyle(numeric);So similarly you should be able to define your own custom styles. I still need to figure out how to do plugin loading here though.