Current Page Reference Styler

This script automatically tags page references that match the current page’s title with a new class called “.current-page-ref”. With this change it’ll allow user’s to customize these page-references to their liking.

In this example you will see the current page title “Text Nodes” and its Page References are in a bolder font with a bottom-border style. This is just an example to demonstrate but it’ll be up to the user’s to customize this however they wish.

Drop into your custom.js

function updatePageReferencesWithCurrentClass() {
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'childList' || mutation.type === 'attributes') {

  function updateCurrentPageRefs() {
    const titleBlock = document.querySelector('.title.block');
    if (!titleBlock) return;

    const titleText = titleBlock.textContent.trim().toLowerCase();
    const pageRefs = document.querySelectorAll('.ls-block .page-ref');

    // Add or remove "current-page-ref" class based on matching with ".title.block" value
    pageRefs.forEach((pageRef) => {
      const dataRef = pageRef.getAttribute('data-ref').toLowerCase();
      if (dataRef === titleText) {
      } else {

  observer.observe(document.body, {
    subtree: true,
    childList: true,

  // Apply the class to the elements immediately and also check for any mismatches

// Initialize the function to start observing and update classes accordingly

Then in your custom.css you can define whatever style you want. For demonstration you can do:

.current-page-ref {
  border-bottom: 1px solid;
  font-weight: bold;