HTML+CSS+Javascript tools offer a great way to create beautiful presentations (e.g. reveal.js + MathJax). However, I usually need to add citations to my presentations, and I would like to do that in a systematic way (so the bibliography is organized and the references are well-formatted). This is something that get's handled quite easily in LaTeX through BibTeX.

The best solution I've found so far es from a library called bibtex-js. It seems to do a good job on rendering BiBTeX files in HTML as a bibliography listing, which is partially what I want. However, I don't only need to render bibliography listings, but also, I need to refer to entries in that bibliography by some index, and get a uniformly formatted reference marker. Take, for example, how LaTeX usually handles this problem:

%In thebibliography.bib
@article{darwin1859origins,
  title={On the origins of species by means of natural selection},
  author={Darwin, Charles},
  journal={London: Murray},
  year={1859}
}

%In mydocument.tex
As \cite{darwin1859origins} sustains in his ground-breaking book...

The previous code would be rendered as something like "As Darwin(1859) sustains in his ground-breaking book". Moreover, the formatting in which the citation is rendered could also be customizable (e.g. "Darwin,1859", "(Darwing,1859)", "[DWN59]", "[1]", etc.).

So the question is, how do you handle a similar task on a HTML document?

Thank you all in advance!

HTML+CSS+Javascript tools offer a great way to create beautiful presentations (e.g. reveal.js + MathJax). However, I usually need to add citations to my presentations, and I would like to do that in a systematic way (so the bibliography is organized and the references are well-formatted). This is something that get's handled quite easily in LaTeX through BibTeX.

The best solution I've found so far es from a library called bibtex-js. It seems to do a good job on rendering BiBTeX files in HTML as a bibliography listing, which is partially what I want. However, I don't only need to render bibliography listings, but also, I need to refer to entries in that bibliography by some index, and get a uniformly formatted reference marker. Take, for example, how LaTeX usually handles this problem:

%In thebibliography.bib
@article{darwin1859origins,
  title={On the origins of species by means of natural selection},
  author={Darwin, Charles},
  journal={London: Murray},
  year={1859}
}

%In mydocument.tex
As \cite{darwin1859origins} sustains in his ground-breaking book...

The previous code would be rendered as something like "As Darwin(1859) sustains in his ground-breaking book". Moreover, the formatting in which the citation is rendered could also be customizable (e.g. "Darwin,1859", "(Darwing,1859)", "[DWN59]", "[1]", etc.).

So the question is, how do you handle a similar task on a HTML document?

Thank you all in advance!

• javascript
• html
• latex
• bibtex

Share Improve this question Follow edited Oct 25, 2013 at 14:45 GermanK asked Oct 1, 2013 at 9:28 GermanKGermanK 1,68622 gold badges1414 silver badges2121 bronze badges 2

• 1 For future reference, this question is off-topic for StackOverflow: "Questions asking us to remend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." However, this may be on-topic at tex.stackexchange., so I'm not voting to close because of the library request, but rather voting to migrate to TeX.SE. – Joshua Taylor Commented Oct 1, 2013 at 12:29
• 3 Hi Joshua. I've considered putting it on tex.stackexchange., but it is, as a matter of fact, pletely off-topic there. It has actually nothing to do with TeX. If systems like LaTeX wouldn't exist, my question would still be valid, since my requirement is generic enough. The mere fact that LaTeX normally fulfills this functionality gives me the means to perfectly define it with more precision. But I repeat, it has nothing to do with TeX. As for the issue that the question is off-topic in the way it's posed, I will rephrase it accordingly to fulfill the guidelines. Thanks for your concern. – GermanK Commented Oct 1, 2013 at 14:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Yes, there is an emacs extension called org-mode, which is text processing with a markdown like syntax. This can export to reveal-js trough this: https://github./yjwen/org-reveal Or in my case I use the spacemacs extension: https://github./syl20bnr/spacemacs/tree/master/layers/%2Bemacs/org#revealjs-support

So org mode is an intermediate format that piles to whatever you want, ie reveal-js, html, or even latex. This includes a reference management system: https://github./jkitchin/org-ref

I'm unhappy with this for reveal.js, if we use this with reveal.js we end up having all the citation being presented as the link (whatever we type after cite:) and the full format citations are grouped on whatever slide you place them (so if you have more than 3 you can't read it correctly, although I guess its in the HTML). What I want is either the numbers I get in latex or footnote based citations, because in case of slides footnotes work kind off good.

This will of course work for just HTML pages, however you probably want to have presentations like me. I was searching for a solution for this when I stumbled upon this unanswered question so I guess here is your answer.

I made a project, incidentally also called bibtex-js. Available on npm.

I made it because most BibTeX parsers out there take considerable shortcuts in parsing. This one aligns closely with the authoritative document on BibTeX, Tame the BeaST and so works pretty well in terms of references and parsing author names, which seems what you are after.

I would say, based on some bibliographic standard, roll your own inline citation function:

import {parseBibFile, normalizeFieldValue} from "bibtex";

// Parse bib file
const bibFile = parseBibFile(bibtexString); // insert the darwin1859origins example as a string

// Sanity check: print all ids of entries in the bibfile
console.log(Object.keys(bibFile.entries$)); 

// Get the entry we are after
const entry = bibFile.getEntry("darwin1859origins");

// Get the relevant fields

// normalizeFieldValue turns a BibTeX string into a Javascript string
const year = normalizeFieldValue(entry.getField("year")); 
// get first author
// "author" is a special kind of BibTeX field
const author = entry.getField("author").authors$[0]; 

function inlineCite(author){
   return "("
          + (author.firstNames
                .concat(author.vons)
                .concat(author.lastNames)
                .concat(author.jrs)).join(" ")
          + "," + year
        + ")";
}

console.log(inlineCite(author)); // (Charles Darwin, 1859)

You can do something plicated with et al. if you have multiple authors.