jwebsite/faq/technical.md

134 lines
3.7 KiB
Markdown
Executable File

@def hascode=true
@def maxtoclevel=3
# FAQ - Technical
If you have a question that you couldn't find an answer to easily, don't hesitate to [open an issue](https://github.com/tlienart/Franklin.jl/issues/new) on GitHub, it will help me make this section more complete!
\toc
## Styling
### Can you style footnote text?
**Reference**: [issue 243](https://github.com/tlienart/Franklin.jl/issues/243), **more on this**: [styling](/styling/classes/).
For the reference basically a footnote is inserted as
```html
<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:
```html
<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:
```css
.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](/syntax/divs-commands/#div_blocks))
```markdown
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:
```css
.no-number .katex-display::after {
counter-increment: nothing;
content: "";
}
```
And possibly [define a command](/syntax/divs-commands/#latex-like_commands) in `config.md`:\
```markdown
\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](https://github.com/tlienart/Franklin.jl/issues/251), **more on this**: [code tricks](/code/eval-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:
`````md
```julia:./ex
#hideall
for name in ("Shinzo", "Donald", "Angela", "Christine")
println("""
@@card
### $name
![]("$(lowercase(name)).jpg")
@@
""")
end
```
\textoutput{./ex}
`````
Generates
```html
<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](https://github.com/tlienart/Franklin.jl/issues/322).
See [this tutorial](/extras/plotly/) for a way to do this.