FAQ - Technical

If you have a question that you couldn't find an answer to easily, don't hesitate to open an issue on GitHub, it will help me make this section more complete!

Styling

Can you style footnote text?

Reference: issue 243, more on this: styling.

For the reference basically a footnote is inserted as

<sup id="fnref:1"><a href="/menu1/#fndef:1" class="fnref">[1]</a></sup>

So you can style that with the class .franklin-content sup a.fnref.

For definitions, it's inserted as a table like:

<table class="fndef" id="fndef:blah">
    <tr>
        <td class="fndef-backref"><a href="/menu1/#fnref:blah">[2]</a></td>
        <td class="fndef-content">this is another footnote</td>
    </tr>
</table>

so you can style the back-reference via the .franklin-content fndef td.fndef-backref and the text of the definition via .franklin-content fndef td.fndef-content; for instance, consider the following base styling:

.franklin-content table.fndef  {
    margin: 0;
    margin-bottom: 10px;}
.franklin-content .fndef tr, td {
    padding: 0;
    border: 0;
    text-align: left;}
.franklin-content .fndef tr {
    border-left: 2px solid lightgray;
    }
.franklin-content .fndef td.fndef-backref {
    vertical-align: top;
    font-size: 70%;
    padding-left: 5px;}
.franklin-content .fndef td.fndef-content {
    font-size: 80%;
    padding-left: 10px;}

How to disable numbering of math in display mode?

It is possible to specify in the CSS which Katex equations will be numbered or not by adjusting the .katex-display::after class. If you want to disable numbering in the entire site, just head to _css/franklin.css and remove the .katex-display::after block. You can also build a simple way to disable all numbering inside a specified @@ div (see div blocks)

This is numbered:
$$ 1+1 = 2 $$

This isn't:

@@no-number
$$ 2+2 = 4 $$
and
$$ 3+3 = 7-1 $$
@@

Numbered again:
$$ 7 + 1 = 8 $$

by adding in the CSS:

.no-number .katex-display::after {
  counter-increment: nothing;
  content: "";
}

And possibly define a command in config.md:

\newcommand{\nalign}[1]{@@no-number \begin{align}#1\end{align}@@}
if you feel it is more convenient to write \nalign{3+3 = 6}.

Code

How to use loops for templating?

Reference: issue 251, more on this: code tricks.

Since you can show the output of any Julia code block (and interpret that output as Franklin markdown), you can use this to help with templating. For instance:

```julia:./ex
#hideall
for name in ("Shinzo", "Donald", "Angela", "Christine")
    println("""
    @@card
    ### $name
    ![]("$(lowercase(name)).jpg")
    @@
    """)
end
```
\textoutput{./ex}

Generates

<div class="card"><h3 id="shinzo"><a href="/index.html#shinzo">Shinzo</a></h3>  <img src="shinzo.jpg" alt="" /></div>
<div class="card"><h3 id="donald"><a href="/index.html#donald">Donald</a></h3>  <img src="donald.jpg" alt="" /></div>
<div class="card"><h3 id="angela"><a href="/index.html#angela">Angela</a></h3>  <img src="angela.jpg" alt="" /></div>
<div class="card"><h3 id="christine"><a href="/index.html#christine">Christine</a></h3>  <img src="christine.jpg" alt="" /></div>

How to insert Plotly plots?

Reference: issue 322.

See this tutorial for a way to do this.