134 lines
3.7 KiB
Markdown
134 lines
3.7 KiB
Markdown
@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.
|