lua filter for modifying "Figure 1" caption titles

[january3]

I am trying to figure out how to modify the style of "Figure 1" in an image caption. Basically, you can specify the fig-title parameter in the yaml header

--
crossref:
  fig-title: "*Figure*"
--

But the result will be that "Figure" shows in bold, and "1" shows in normal style. However, I want to change the style of both, Figure and the cross reference. I thought that I will write a simple pandoc lua filter to take care of it. This is not a complicated job, but it turns out that in the AST that my filter gets from pandoc there are no caption titles or crossreferences, just the image captions specified by the document.

Therefore, unfortunately, it looks like the figure numbering is done after my filter runs on the pandoc AST.

One solution would be to make quarto create a native format, and then process it with pandoc to get the final HTML. But that way I loose all the Quarto visual goodies!

Another one, which I tried and which works (sort of) is to parse the HTML produced by quarto using another instance of pandoc:

quarto render test.qmd -t html | pandoc -L ./figfilt.lua -o test.html

The filter itself:

function Div(a)
  if a.classes[1] ~= "quarto-figure" then return end
  a.content = a.content:walk({
    Plain = function(el) 
      if not el.content[1].format and string.find(el.content[1].text, "^Figure") then
        el.content[1] = pandoc.Strong(el.content[1])
      end
      return el
    end,
  })

  return a
end

However, this is a hack, not a proper solution. It depends on how exactly the HTML from quarto looks like, on the fact that figure title is "Figure" and not, for example, "Abbildung" etc.

Is there a better solution?

[Gilquin]

Hello,

here is a jQuery alternative to put in bold both the figure label ("Figure" or "Fig." hereafter) and the figure listing number (up to 99):

<script>
// Iterate over figure caption element
$( "figure.figure > figcaption.figure-caption" ).each(function(){
  // store numeric variable and replace by bold version
  $(this).html($(this).text().replace(/^(Fig\.\s\d{1,2})/, function($1) {return "<b>" + $1 + "</b>";}));
});
</script>

The script needs to be saved as a ".html" file and included as per the documentation.

The corresponding format.yml crossref specification:

format:
  html:
    crossref:
      fig-title: Fig.
      title-delim: \.

If you use a different fig-title and/or title-delim, you will have to change the regex pattern /^(Fig\.\s\d{1,2})/ accordingly.

[EricKrantz]

It doesn't work for me.

I put the jQuery script in my project folder, added ".html", and here is my yml:

include-before-body: BoldFig.html
execute:
  echo: false
format: 
  html:
    embed-resources: true
    smooth-scroll: true
    css: styles.css
    toc: true
    crossref: 
      fig-title: Fig.
      title-delim: \.

[mcanouil]

For reference, the suggestion to have a way to have bold labels:

• A few suggestions for cross referencing and text layout #1095

[mcanouil]

And

• Using markup in crossref labels? #7386