Problem with Block code "fences" display

Support Content & Markdown
1

Hello everybody,

I have a problem with the display of text in the Block code “fences” (```)

This is my source:

$TTL 1h
@ IN SOA ca-lin-ns01.artesis.be. hostmaster.artesis.be. (
                2012110901      ; Serial
                1h              ; Refresh
                30m             ; Retry
                2d              ; Expire
                10m )           ; Negative caching TTL

@       IN NS   ca-lin-ns01.artesis.be.
@       IN NS   ca-lin-ns02.artesis.be.

www                     A       193.191.129.214

But, it displays as:

Selection_025
Selection_025.png1323×290 13.2 KB

It seems that the blank lines are the source of the problem (they do not contain spaces).
I am using the Learn2 theme.

Can somebody help, please?

2

It’s just CSS. There is padding of 2rem on the pre in the theme, just remove it.

3

Hi rhuk,

Thanks for the info. I am not that specialised in adapting themes.
Can you please tell me where I can find this?

Thanks,

Raf
4

To do any kind of web development you really need to learn how to use the developer tools in your browser. For example:

Installation | Grav Documentation 2017-11-28 22-12-08
Installation | Grav Documentation 2017-11-28 22-12-08.png1622×677 237 KB

This is Chrome you just inspect the element, and then look to see what CSS is causing that.

The problem now is you need to edit that .scss file and recompile the SCSS, or you need to add your own css file to override stuff.

Create a new file called learn2/css/custom.css and put:

pre {
    padding: 0 !important;
}

Reload the page.

5

Hello rhuk,

Sorry, this did not solve the issue. I got still the same problem.

Regards,

 Raf
6

Hi @rvreugde, could you please explain in detail what is your problem about exactly?

7

His problem is that the theme is not rendering the full code string, there are two lines outside of the formated code output.

@rvreugde does it works when using <pre> </pre> tags instead of the markdown triple backtick?

8

sorry i completely misread this issue… I just tested and it output fine:

43 AM
43 AM1057×441 18.5 KB

9

Hello rhuk,

When I use a bulleted list entry, I got the problem:

Title 1

  • This is the entry
$TTL 1h
@ IN SOA ca-lin-ns01.artesis.be. hostmaster.artesis.be. (
                2012110901      ; Serial
                1h              ; Refresh
                30m             ; Retry
                2d              ; Expire
                10m )           ; Negative caching TTL

@       IN NS   ca-lin-ns01.artesis.be.
@       IN NS   ca-lin-ns02.artesis.be.

www                     A       193.191.129.214
10

Hello hugoaf and MakaryGo:

When I use the following MarkDown, even when I user the pre-tags, I got the problem. It seems that the bulleted list entry causes the problem.

Title 1

  • This is the entry
$TTL 1h
@ IN SOA ca-lin-ns01.artesis.be. hostmaster.artesis.be. (
                2012110901      ; Serial
                1h              ; Refresh
                30m             ; Retry
                2d              ; Expire
                10m )           ; Negative caching TTL

@       IN NS   ca-lin-ns01.artesis.be.
@       IN NS   ca-lin-ns02.artesis.be.

www                     A       193.191.129.214
11

a quick shot @rvreugde, try adding one more line between your list item and the backticks.