search

asciidoctor / asciidoctor-reveal.js

:crystal_ball: A reveal.js converter for Asciidoctor and Asciidoctor.js. Write your slides in AsciiDoc!
http://asciidoctor.org
Other
287 stars 189 forks source link

Source code block is cut #508

Closed refaelsh closed 1 year ago

refaelsh commented 1 year ago

Here is a snippet:

== HTML
Hyper Text Markup Language
// [.stretch]
[source, html, linenums]
----
<html>
  <head>
    <title>macrosoft is the worst company ever</title>
  </head>
  <body>
    <div align="left">
      winblows is a binary blob of proprietary information.
    </div>
    <div align="right">
      Open Source is the best.
    </div>
    <div align="center">
      Functional Programming is a better paradigm then OOP.
    </div>
  </body>
</html>
----

[%step]
. Not human readable
. Very unwieldy syntax: HTML + CSS + Javascript

Here is how it looks: Untitled

Why the source code block is cut? Is this a bug or am I missing something?

ggrossetie commented 1 year ago

What do you mean by "cut" ? The source code does not fit horizontally in this slide. You can reduce the padding/margin and/or font size and/or create a shorter snippet.

You could also remove the subtitle and use this title Hyper Text Markup Language (H, T, M and L are bold)

refaelsh commented 1 year ago

What do you mean by "cut" ?

The last line of the source code block, line 15, is only half visible.

The source code does not fit horizontally in this slide.

I don't understand. Maybe you meant vertically?

You can reduce the padding/margin and/or font size and/or create a shorter snippet.

Well, does this means that the maximum size (in lines) of source code blocks is 14 lines?

refaelsh commented 1 year ago

You could also remove the subtitle and use this title Hyper Text Markup Language (H, T, M and L are bold)

This did not help.

ggrossetie commented 1 year ago

I don't understand. Maybe you meant vertically?

Yes, sorry from top to bottom 😉

Well, does this means that the maximum size (in lines) of source code blocks is 14 lines?

Not if you are using .stretch , it should take 100% of the height.

https://github.com/asciidoctor/asciidoctor-reveal.js/blob/578670aaae00df74b609ac8a4089ad795999b273/templates/asciidoctor-compatibility.css#L10-L17

refaelsh commented 1 year ago

Not if you are using .stretch , it should take 100% of the height.

This is also not good. Look at all the empty screen real estate circled in red: Untitled

ggrossetie commented 1 year ago

Are you testing with v5.0.0-rc.1? If so, we can work on improving the default style. As a workaround, you can provide your own stylesheet to tweak how source blocks are displayed.

refaelsh commented 1 year ago

Are you testing with v5.0.0-rc.1?

No. I am using 3.9.2.

refaelsh commented 1 year ago

Also, if it had been an HTML written slide with using RevealJS, I could do the following:

<pre><code style="max-height:300px;font-size:0.35em">
...
</code></pre>

E.g., control the max-height thingy that comes from CSS. Is there a way to control it from AsciiDoctor-RevealJS?

ggrossetie commented 1 year ago

Yes, using custom styles: https://docs.asciidoctor.org/reveal.js-converter/latest/converter/custom-styles/

refaelsh commented 1 year ago

Yes, using custom styles: https://docs.asciidoctor.org/reveal.js-converter/latest/converter/custom-styles/

Oh! I get it now. Many pieces are falling in place in my head right now. Thank you very much! :-)

refaelsh commented 1 year ago

Yes, using custom styles: https://docs.asciidoctor.org/reveal.js-converter/latest/converter/custom-styles/

Sorry to bother you again, but I have another question. The link says:

If the :customcss: attribute value is empty then asciidoctor-revealjs.css is the CSS resource that the presentation is linked to.
  1. Where is this asciidoctor-revealjs.css file? I can't find it anywhere on my hard drive.
  2. This file is the default css for Asciidoctor-revealJS, right? If not, what file is the default?
ggrossetie commented 1 year ago

I think the filename is incorrect in the documentation, I think we are referring to https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/templates/asciidoctor-compatibility.css

refaelsh commented 1 year ago

I think the filename is incorrect in the documentation, I think we are referring to https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/templates/asciidoctor-compatibility.css

  1. Is this the default css for Asciidoctor reveal.js?
  2. If the filename is incorrect in the documentation, we should update the documentation. I can open a PR for that, if that's ok by you, but I don't know to what value to update the filename.
ggrossetie commented 1 year ago

You can take a look at the code/template:

https://github.com/asciidoctor/asciidoctor-reveal.js/blob/8f2c82cb2937f2c77f9952f0bb14d76ab6c29301/templates/document.html.slim#L40-L67

If the :customcss: attribute value is empty then asciidoctor-revealjs.css is the CSS resource that the presentation is linked to.

The documentation is actually true but the extension does not provide it, the user has to provide it. Not sure if it's a good idea to link to a file that might not exists. We are also using the following stylesheets regardless of customcss value:

Please open a new issue so we can discuss how to improve the documentation.