Can't style code input and output together with \show

[jkrumbiegel]

The code and the output are wrapped in <pre> but there is no way to apply css differently if an input block and an output block follow each other. Maybe it would be good to give and input and an output class to the <pre> tags?

[tlienart]

hmm typically the code block has a language and the output block is plaintext for instance in the demos there's something that leads to

<pre><code class="language-julia">for i in 1:5
  println&#40;&quot;*&quot;^i&#41;
end</code></pre><pre><code class="plaintext">*
**
***
****
*****
</code></pre>

so the styling could be done via .language-julia and .plaintext.

Is that insufficient? If so we could have what you're suggesting by

• adding a kwarg to html_code (

  Franklin.jl/src/utils/html.jl

  Lines 61 to 72 in e99dedb

  	function html_code(c::AS, lang::AS="")::String
  	isempty(c) && return ""
  	# if it's plaintext
  	isempty(lang) && return "<pre><code class=\"plaintext\">$c</code></pre>"
  	# escape it if it isn't already
  	c = is_html_escaped(c) ? c : htmlesc(c)
  	# remove hidden lines if any
  	c = html_skip_hidden(c, lang)
  	# if empty (e.g. via #hideall) return ""
  	c == "" && return ""
  	return "<pre><code class=\"language-$lang\">$c</code></pre>"
  	end

  )
• passing that kwarg to this line:

  Franklin.jl/src/converter/latex/io.jl

  Line 106 in e99dedb

  reproc || return html_code(output)

[jkrumbiegel]

using the code language feels a bit brittle to me, if I have another language that I don't have styling for, this might break. it's probably cleaner to mark the blocks specifically.

[tlienart]

alright done in #858. Note that I added the class to code and not to pre to not risk breaking existing CSS sheets. Note also that, so far, other languages are not supported but it's a fair point anyway because they will be in the future.

So now you'd style code and code.code-output. We could add also a specific class for the code "input" but it seems redundant to me.

[jkrumbiegel]

Thanks, but is it possible in css to read out if two code blocks in two different pre tags with different classes follow each other? Well I guess output will usually not come alone, but I wanted to attach code and output visually if they come right behind each other. Not sure if that's possible with this solution

[jkrumbiegel]

For example, remove the rounded corners of the code cell at the joint

[tlienart]

how about this (which you could wrap in a command)

@@joined
```!
1+1
```
@@

and in the CSS

.joined code {
...
}
.joined .code-output {
  ... 
}

I think it's safer to have that joined class be for code for which you know that there is output, so that every code block that's not in a joined would have the rounded borders for instance.

Otherwise you're in JS territory (check if an element is or not followed by another), I wouldn't recommend that.