Citations for LiaScript: BibTeX References and Bibliography in Online Courses

Citations for LiaScript: BibTeX References and Bibliography in Online Courses

Academic course materials need proper references. But managing citations in plain Markdown usually means hand-formatting bibliography entries or maintaining separate reference lists that drift out of sync.

The citations template brings full BibTeX support to LiaScript. Based on Citation.js, it renders inline citations and full bibliographies directly in the browser — from embedded BibTeX blocks, DOI lookups, or remote .bib files — in four academic citation styles.


Quick Start

<!--
import: https://raw.githubusercontent.com/LiaTemplates/citations/refs/heads/main/README.md
-->

For a version-pinned import:

<!--
import: https://raw.githubusercontent.com/LiaTemplates/citations/refs/tags/0.0.6/README.md
-->

Inline BibTeX Citations

All citation macros work by wrapping a BibTeX code block with a macro in the fence opener. The block content is the BibTeX source; the macro formats and renders it.

@cite — Short Inline Reference

Use @cite (or @cite.style) to produce a compact inline citation like (Knuth, 1986) or [1]. When a url field is present in the BibTeX, the output becomes a hyperlink.

```bibtex @cite.style(ieee)
@book{knuth1986texbook,
  title     = {The {\TeX} Book},
  author    = {Donald E. Knuth},
  year      = {1986},
  publisher = {Addison-Wesley Professional}
}
```

@bibliography — Full Reference Entry

Use @bibliography (or @bibliography.style) to render a complete formatted bibliography entry. Multiple BibTeX entries in one block are all rendered.

```bibtex @bibliography
@book{knuth1986texbook,
  title     = {The {\TeX} Book},
  author    = {Donald E. Knuth},
  year      = {1986},
  publisher = {Addison-Wesley Professional}
}

@article{dietrich2019liascript,
  title   = {LiaScript: A domain-specific language for interactive online courses},
  author  = {Dietrich, André and Zug, Sebastian},
  year    = {2019},
  url     = {https://arxiv.org/abs/1905.05425}
}
```

Citation Styles

Four styles are supported. Pass the style name as the first argument to any .style() variant.

StyleDescriptionTypical field
harvard1Harvard author-date (default)Humanities, social sciences
apaAmerican Psychological AssociationPsychology, education
vancouverVancouver / ICMJE numericMedicine, life sciences
ieeeIEEE numericEngineering, computer science

The same entry formatted in all four styles:


DOI-Based Citations

The template can also resolve a DOI directly, without requiring embedded BibTeX. Citation.js fetches the metadata automatically.

@bibliography.style(ieee, 10.5281/zenodo.1005176)

@bibliography.style(apa, 10.5281/zenodo.1005176)

This requires internet access to resolve the DOI at render time.


Remote .bib Files

To load an entire bibliography from a remote .bib file, use @bibliography.link:

@[bibliography.link](https://raw.githubusercontent.com/LiaTemplates/citations/main/bibtex.bib)

@[bibliography.link.style(ieee)](https://raw.githubusercontent.com/LiaTemplates/citations/main/bibtex.bib)

All entries in the file are rendered as a formatted bibliography list. The @[macro](url) syntax is LiaScript’s inline link-style macro invocation.


Global Bibliography with @ref

For large courses that reference the same sources across multiple sections, pre-load a .bib file once using @onload:

<!--
import: https://raw.githubusercontent.com/LiaTemplates/citations/refs/heads/main/README.md

@onload
window.citationStyle = "ieee"
window.bibliographyLoad("https://example.com/refs.bib")
@end
-->

Then cite any entry by its BibTeX key anywhere in the document:

As discussed in @ref(dietrich2019liascript), interactive content...

## References

@bibliography.global

The @ref(key) macro renders an inline citation; @bibliography.global renders the complete reference list. @bibliography.global.style(apa) applies a specific style.


Full Template Demo


Use Cases

Academic OER — Embed properly formatted references directly in openly licensed course materials. Students see citations in the style expected by their field — Harvard for humanities, IEEE for engineering — without any additional tooling.

Research methods courses — Teach citation management by showing the same source formatted in multiple styles. The style comparison examples explain conventions rather than just mandating them.

Literature reviews and surveys — Pre-load a .bib file for an entire course and reference entries by key across chapters, sections, and exercises.

Scientific writing training — Use @cite inline to model how in-text citations relate to full bibliography entries. Students see both rendered simultaneously.

Reproducible educational materials — BibTeX is stored as plain text inside the Markdown source. References are version-controlled alongside the content, never in a separate file that can get lost.


Technical Facts

Runs in browserYes — Citation.js (JavaScript)
Server requiredNo
DOI resolutionYes — requires internet access
Remote .bib filesYes — @bibliography.link(url)
Citation stylesharvard1, apa, vancouver, ieee
Global bibliographyYes — via @onload + @ref
Inline citationsYes — @cite
Full entriesYes — @bibliography
Based onCitation.js by L. G. Willighagen
LicenseMIT
MaintainedYes (version 0.0.6, 5 ⭐)
Version-stable importYes (refs/tags/0.0.6)

Try It

Try in LiaScript Open in LiveEditor View on GitHub
  • Wikimedia Commons — embed media from Wikimedia in OER with proper attribution
  • Mermaid — text-based diagrams for illustrating concepts alongside cited research
  • DuckDB — analytical queries for data-driven research teaching
  • Fullscreen — hide the navigation bar in fullscreen mode for clean course presentations

Related Posts

SQLite for LiaScript: Teach SQL Interactively in the Browser

Use the SQLite template to create, query, import, and export SQL databases directly inside LiaScript courses — no server, no setup, just SQL in the browser.

Read More

DuckDB for LiaScript: Teach Data Analytics Directly in the Browser

Use the DuckDB template to run analytical SQL queries, explore datasets, and teach data analytics directly inside LiaScript courses — no server, fully powered by WebAssembly.

Read More

Pannellum for LiaScript: 360° Panoramas and Virtual Tours in Your Course

Embed interactive 360° panorama images and virtual tours in LiaScript using the Pannellum template — add clickable hotspots, links, and 360° video, all from a single image URL.

Read More