Franklin.jl for engineering content

General Usage Performance
, ,
1

I am coming to my limits while trying to port this Quarto document to Franklin.jl. I have little knowledge of HTML and CSS.
From reading the documentations and the GitHub issues, I did not find a way to generate a figure caption with numbering, like LaTeX and Quarto do. Is it possible? Or should I just stick to Quarto?

2 Likes
2

Franklin only comes with a set of basic functionalities. The idea is that they’ll allow you to implement anything you want.

For example, one way to use its functionalities is to add to config.md the following

\newcommand{\myPicStyle}[4]{ \html{
  <h2 style="color:white;">
    <div style="text-decoration:underline;">#1"</div>
  </h2>
  <img src="#2" style="width:#3; height:auto; margin-top:1em; margin-bottom:1em;max-width:100%;">
  <div style="padding-bottom:1.5em; width:75%; margin:0 auto; font-size:90%;"> <u><b>Note</b></u>: #4</span>. </div>
  }
}

and then within your document, you’ll call

\myPicStyle{The title}{thispic.jpg}{900px (or any width)}{This is the caption}

There are more examples of implementations of other functionalities here.

If you don’t have knowledge of html/css, you can ask maybe an AI. They’re really good at providing code snippets for this type of functionality.

Then you’d need just to add to config.md

\newcommand{\myPicStyle}[<number of arguments>]{ \html{
<code provided by AI. Replace #i (where i is a number) for those functionalities that you want to specify when the functionality is called>
  }
}

and then call it within your document.

3 Likes
3

Thank you for the snippet and the pointer (Franklin FAQ).

If I understand correctly, I still have to manage the figure numbering myself.

4

You can do it with JavaScript. If you don’t know JavaScript, AI can help. For example, I haven’t tested it, but DeepSeek is providing the following (I just reformatted so that you can easily add it to Franklin).

Add this code to config.md, so that the way to call the figure is similar to what I said before (i.e. \myPicStyle{The title}{thispic.jpg}{900px (or any width)}{This is the caption})

\newcommand{\myPicStyle}[4]{ \html{
<h2 style="color:white">
    <div class="auto-figure" style="text-decoration:underline"></div>
</h2>
<img src="#2" style="width:#3; height:auto; margin-top:1em; margin-bottom:1em; max-width:100%">
<div style="padding-bottom:1.5em; width:75%; margin:0 auto; font-size:90%">
    <u><b>Note</b></u>: #4
</div>
}

on the folder _layout, go to foot.html, and add the following

<script>
document.addEventListener('DOMContentLoaded', function() {
    const figures = document.querySelectorAll('.auto-figure');
    figures.forEach((element, index) => {
        element.textContent = `Figure ${index + 1}`;
    });
});
</script>

which should be handling the enumeration automatically for you.
Again, I emphasize that I haven’t tested it myself, but I don’t see anything that makes me think it won’t work.

1 Like