# Franklin.jl for engineering content

**URL:** https://discourse.julialang.org/t/franklin-jl-for-engineering-content/126263
**Category:** Performance
**Tags:** latex, franklin, figures
**Created:** [February 24, 2025, 8:22pm UTC](https://discourse.julialang.org/t/franklin-jl-for-engineering-content/126263 "2025-02-24T20:22:11Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mzaffalon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mzaffalon/32/214168_2.png) [@mzaffalon](https://discourse.julialang.org/u/mzaffalon)
#### Post date: [February 24, 2025, 8:22pm UTC](https://discourse.julialang.org/t/franklin-jl-for-engineering-content/126263/1 "2025-02-24T20:22:11Z")

</div>

I am coming to my limits while trying to port this [Quarto document](https://mzaffalon.github.io/AM-PM/AM-PM.html) to [Franklin.jl](https://github.com/tlienart/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?

---

<div class="post-metadata">

### Author: ![alfaromartino](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/alfaromartino/32/52986_2.png) [@alfaromartino](https://discourse.julialang.org/u/alfaromartino)
#### Post date: [February 24, 2025, 9:09pm UTC](https://discourse.julialang.org/t/franklin-jl-for-engineering-content/126263/2 "2025-02-24T21:09:21Z")

</div>

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

```julia
\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

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

```

There are more examples of implementations of other functionalities [here](https://franklinjl.org/demos/).

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

```julia
\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.

---

<div class="post-metadata">

### Author: ![mzaffalon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mzaffalon/32/214168_2.png) [@mzaffalon](https://discourse.julialang.org/u/mzaffalon)
#### Post date: [February 25, 2025, 10:20am UTC](https://discourse.julialang.org/t/franklin-jl-for-engineering-content/126263/3 "2025-02-25T10:20:35Z")

</div>

Thank you for the snippet and the pointer ([Franklin FAQ](https://franklinjl.org/demos/#008_custom_environments_and_commands)).

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

---

<div class="post-metadata">

### Author: ![alfaromartino](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/alfaromartino/32/52986_2.png) [@alfaromartino](https://discourse.julialang.org/u/alfaromartino)
#### Post date: [February 26, 2025, 4:30am UTC](https://discourse.julialang.org/t/franklin-jl-for-engineering-content/126263/4 "2025-02-26T04:30:41Z")

</div>

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}`)

```julia
\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

```julia
<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.