Reference Management in HTML

[EDIT – this article has been superceded by a newer one – click here to view it]

Writing well-referenced material is a chore. If you’re using LaTeX, then you’re in luck because it works with BibTeX to lessen the tedium. If you’re using a word-processor, you’re still in luck as you can use something like EndNote to manage your references. How about if you are writing a blog, or an HTML book, or contributing to a Wiki? Then, it seems, you’re out of luck.

Until now. Enter JSNote (Javascript Note). It works pretty much the same way that BibTeX does with LaTeX. You maintain a list of references in a separate file, and in your material you cite those references by means of calling a javascript function. For example;

// Filename /downloads/references.js
addRef ({name : "john",
year : "2012",
volume : "17",
author : "Charles Dodgeson",
title : "Obtuse Works of Mathematics in 'Alice in WonderLand'",
addRef ({name : "boehm_1",
year : "2006",
month: "May",
conference: "ICSE '06",
author : "Barry Boehm",
publisher: "ACM",
title : "A View of 20th and 21st Century Software Engineering",

And then, in your HTML you pull the jsnote.js script in, as well as your list of references and use them like so:

<script src="/downloads/jsnote.js"></script>
<script src="/downloads/references.js"></script>
<p>I now will reference Boehms article<script>cite ("boehm_1")</script>and then reference Johns article like this<script>cite ("john")</script></p>


The practical result is that the citations are all printed properly. The above example looks like this. Note that the list of references in reference.js works exactly like it would in BibTeX, namely that you can put the arguments in any order, or even leave some of them out if you don’t want them displayed. As long as each reference in the references list has a name, jsnote will be able to cite and display all the information you gave when adding it as a reference.

Literate Programming Is Not Dead Yet.

Get jsnote.js
Get a sample references file

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>