Differentiate source blocks in export?

Differentiate source blocks in export?

[Joost Kremers]

Hi all,

I was wondering if there's a way to distinguish between different kind of source
code blocks when exporting to HTML.

Specifically, I would like a way to mark certain code blocks in my Org file so
that those code blocks get a specific class in the HTML export. I can then style
them with some CSS to make them stand out visually. I know I can use special
blocks to get divs with a custom class, but I don't want to lose all the
benefits of code blocks...

I tried Google and the Org manual but I haven't been able to find anything on
this.

TIA

-- 
Joost Kremers
Life has its moments

Re: Differentiate source blocks in export?

[John Kitchin]

[-- Attachment #1: Type: text/plain, Size: 1097 bytes --]

I think you would have to use some kind of filter to look either for an
#+attr_html or src-header argument, and modify the html output for that.

John

-----------------------------------
Professor John Kitchin
Doherty Hall A207F
Department of Chemical Engineering
Carnegie Mellon University
Pittsburgh, PA 15213
412-268-7803
@johnkitchin
http://kitchingroup.cheme.cmu.edu



On Tue, Nov 24, 2020 at 7:16 AM Joost Kremers <joostkremers@fastmail.fm>
wrote:

> Hi all,
>
> I was wondering if there's a way to distinguish between different kind of
> source
> code blocks when exporting to HTML.
>
> Specifically, I would like a way to mark certain code blocks in my Org
> file so
> that those code blocks get a specific class in the HTML export. I can then
> style
> them with some CSS to make them stand out visually. I know I can use
> special
> blocks to get divs with a custom class, but I don't want to lose all the
> benefits of code blocks...
>
> I tried Google and the Org manual but I haven't been able to find anything
> on
> this.
>
> TIA
>
> --
> Joost Kremers
> Life has its moments
>
>

[-- Attachment #2: Type: text/html, Size: 1738 bytes --]

Re: Differentiate source blocks in export?

[Marvin ‘quintus’ Gülker]

Hi!

Am Dienstag, dem 24. November 2020 schrieb Joost Kremers:
> I was wondering if there's a way to distinguish between different kind of source
> code blocks when exporting to HTML.
>
> Specifically, I would like a way to mark certain code blocks in my Org file so
> that those code blocks get a specific class in the HTML export.

You can use the BEGIN_EXPORT/END_EXPORT pair to include a literal HTML
DIV tag around your target code block. Try this:

    Wrapped code block in a div with a custom class:

    #+BEGIN_EXPORT html
    <div class="myclass">
    #+END_EXPORT

    #+BEGIN_SRC c
    #include <stdio.h>
    int main(int argc, char* argv[])
    {
        printf("This is wrapped in the div\n");
        return 0;
    }
    #+END_SRC

    #+BEGIN_EXPORT html
    </div>
    #+END_EXPORT

    Normal codeblock without:

    #+BEGIN_SRC c
    #include <stdio.h>
    int main(int argc, char* argv[])
    {
        printf("This is not wrapped in anything unusual\n");
        return 0;
    }
    #+END_SRC

Note how one of the EXPORT blocks wraps the opening tag of the DIV and
the other one wraps the closing tag.

  -quintus

-- 
Dipl.-Jur. M. Gülker | https://mg.guelker.eu |    For security:
Passau, Germany      | kontakt@guelker.eu    | () Avoid HTML e-mail
European Union       | PGP: see homepage     | /\ http://asciiribbon.org

Re: Differentiate source blocks in export?

[John Kitchin]

[-- Attachment #1: Type: text/plain, Size: 2003 bytes --]

Nice! Here is a little more compact way to do that I think:

@@html:<div class="myclass">@@
#+BEGIN_SRC python
print(5)
#+END_SRC
@@html:</div>@@


John

-----------------------------------
Professor John Kitchin
Doherty Hall A207F
Department of Chemical Engineering
Carnegie Mellon University
Pittsburgh, PA 15213
412-268-7803
@johnkitchin
http://kitchingroup.cheme.cmu.edu



On Tue, Nov 24, 2020 at 11:08 AM Marvin ‘quintus’ Gülker <
post+orgmodeml@guelker.eu> wrote:

> Hi!
>
> Am Dienstag, dem 24. November 2020 schrieb Joost Kremers:
> > I was wondering if there's a way to distinguish between different kind
> of source
> > code blocks when exporting to HTML.
> >
> > Specifically, I would like a way to mark certain code blocks in my Org
> file so
> > that those code blocks get a specific class in the HTML export.
>
> You can use the BEGIN_EXPORT/END_EXPORT pair to include a literal HTML
> DIV tag around your target code block. Try this:
>
>     Wrapped code block in a div with a custom class:
>
>     #+BEGIN_EXPORT html
>     <div class="myclass">
>     #+END_EXPORT
>
>     #+BEGIN_SRC c
>     #include <stdio.h>
>     int main(int argc, char* argv[])
>     {
>         printf("This is wrapped in the div\n");
>         return 0;
>     }
>     #+END_SRC
>
>     #+BEGIN_EXPORT html
>     </div>
>     #+END_EXPORT
>
>     Normal codeblock without:
>
>     #+BEGIN_SRC c
>     #include <stdio.h>
>     int main(int argc, char* argv[])
>     {
>         printf("This is not wrapped in anything unusual\n");
>         return 0;
>     }
>     #+END_SRC
>
> Note how one of the EXPORT blocks wraps the opening tag of the DIV and
> the other one wraps the closing tag.
>
>   -quintus
>
> --
> Dipl.-Jur. M. Gülker | https://mg.guelker.eu |    For security:
> Passau, Germany      | kontakt@guelker.eu    | () Avoid HTML e-mail
> European Union       | PGP: see homepage     | /\ http://asciiribbon.org
>
>

[-- Attachment #2: Type: text/html, Size: 3072 bytes --]

Re: Differentiate source blocks in export?

[Diego Zamboni]

[-- Attachment #1: Type: text/plain, Size: 2312 bytes --]

And even (a bit) shorter:

#+html:<div class="myclass">
#+BEGIN_SRC python
print(5)
#+END_SRC
#+html:</div>

--Diego

On Tue, Nov 24, 2020 at 5:16 PM John Kitchin <jkitchin@andrew.cmu.edu>
wrote:

> Nice! Here is a little more compact way to do that I think:
>
> @@html:<div class="myclass">@@
> #+BEGIN_SRC python
> print(5)
> #+END_SRC
> @@html:</div>@@
>
>
> John
>
> -----------------------------------
> Professor John Kitchin
> Doherty Hall A207F
> Department of Chemical Engineering
> Carnegie Mellon University
> Pittsburgh, PA 15213
> 412-268-7803
> @johnkitchin
> http://kitchingroup.cheme.cmu.edu
>
>
>
> On Tue, Nov 24, 2020 at 11:08 AM Marvin ‘quintus’ Gülker <
> post+orgmodeml@guelker.eu> wrote:
>
>> Hi!
>>
>> Am Dienstag, dem 24. November 2020 schrieb Joost Kremers:
>> > I was wondering if there's a way to distinguish between different kind
>> of source
>> > code blocks when exporting to HTML.
>> >
>> > Specifically, I would like a way to mark certain code blocks in my Org
>> file so
>> > that those code blocks get a specific class in the HTML export.
>>
>> You can use the BEGIN_EXPORT/END_EXPORT pair to include a literal HTML
>> DIV tag around your target code block. Try this:
>>
>>     Wrapped code block in a div with a custom class:
>>
>>     #+BEGIN_EXPORT html
>>     <div class="myclass">
>>     #+END_EXPORT
>>
>>     #+BEGIN_SRC c
>>     #include <stdio.h>
>>     int main(int argc, char* argv[])
>>     {
>>         printf("This is wrapped in the div\n");
>>         return 0;
>>     }
>>     #+END_SRC
>>
>>     #+BEGIN_EXPORT html
>>     </div>
>>     #+END_EXPORT
>>
>>     Normal codeblock without:
>>
>>     #+BEGIN_SRC c
>>     #include <stdio.h>
>>     int main(int argc, char* argv[])
>>     {
>>         printf("This is not wrapped in anything unusual\n");
>>         return 0;
>>     }
>>     #+END_SRC
>>
>> Note how one of the EXPORT blocks wraps the opening tag of the DIV and
>> the other one wraps the closing tag.
>>
>>   -quintus
>>
>> --
>> Dipl.-Jur. M. Gülker | https://mg.guelker.eu |    For security:
>> Passau, Germany      | kontakt@guelker.eu    | () Avoid HTML e-mail
>> European Union       | PGP: see homepage     | /\ http://asciiribbon.org
>>
>>

[-- Attachment #2: Type: text/html, Size: 3597 bytes --]

Re: Differentiate source blocks in export?

[Eric S Fraga]

On Tuesday, 24 Nov 2020 at 17:22, Diego Zamboni wrote:
> And even (a bit) shorter:
>
> #+html:<div class="myclass">

Or, if you want a more org-like feel to your special constructs, and
something that would in principle work to other export engines:

#+begin_src org
  ,#+begin_myclass
  ,#+begin_src octave
  y = 3 * x + 5
  ,#+end_src
  ,#+end_myclass
#+end_src

using special blocks which translate to divs on HTML export.

-- 
: Eric S Fraga via Emacs 28.0.50, Org release_9.4-118-g2a4578.dirty

Re: Differentiate source blocks in export?

[Joost Kremers]

On Tue, Nov 24 2020, Eric S Fraga wrote:
> On Tuesday, 24 Nov 2020 at 17:22, Diego Zamboni wrote:
>> And even (a bit) shorter:
>>
>> #+html:<div class="myclass">
>
> Or, if you want a more org-like feel to your special constructs, and
> something that would in principle work to other export engines:
>
> #+begin_src org
>   ,#+begin_myclass
>   ,#+begin_src octave
>   y = 3 * x + 5
>   ,#+end_src
>   ,#+end_myclass
> #+end_src
>
> using special blocks which translate to divs on HTML export.

That, unfortunately, seems to make it impossible to edit the source block as
Octave (or in my case Python) code. Pressing =C-c '= in this source block gives
me an Org buffer.

-- 
Joost Kremers
Life has its moments

Re: Differentiate source blocks in export?

[Eric S Fraga]

On Tuesday, 24 Nov 2020 at 23:02, Joost Kremers wrote:
> That, unfortunately, seems to make it impossible to edit the source block as
> Octave (or in my case Python) code. Pressing =C-c '= in this source block gives
> me an Org buffer.

Take away the begin...end org block itself which I only put to protect
the org code for the email.  You should then be able to edit the src
block with no problem.

  #+begin_myclass
  #+begin_src octave
  y = 3 * x + 5
  #+end_src
  #+end_myclass

If I have point within the octave src block, C-c ' works fine for me.

-- 
: Eric S Fraga via Emacs 28.0.50, Org release_9.4-118-g2a4578.dirty

Re: Differentiate source blocks in export?

[Joost Kremers]

On Wed, Nov 25 2020, Eric S Fraga wrote:
> On Tuesday, 24 Nov 2020 at 23:02, Joost Kremers wrote:
>> That, unfortunately, seems to make it impossible to edit the source block as
>> Octave (or in my case Python) code. Pressing =C-c '= in this source block gives
>> me an Org buffer.
>
> Take away the begin...end org block itself which I only put to protect
> the org code for the email.  You should then be able to edit the src
> block with no problem.

Oh, sorry, I didn't realise that... 

>   #+begin_myclass
>   #+begin_src octave
>   y = 3 * x + 5
>   #+end_src
>   #+end_myclass
>
> If I have point within the octave src block, C-c ' works fine for me.

I like this solution for the "Org-ness" of the syntax, and yes, =C-c '= works,
but font lock is gone...

-- 
Joost Kremers
Life has its moments

Re: Differentiate source blocks in export?

[Eric S Fraga]

On Wednesday, 25 Nov 2020 at 09:37, Joost Kremers wrote:
> I like this solution for the "Org-ness" of the syntax, and yes, =C-c
> '= works, but font lock is gone...

Yes, font lock is gone unfortunately but I am not sure why that
is.  Something for somebody who understands the syntax highlighting code
to investigate?

-- 
: Eric S Fraga via Emacs 28.0.50, Org release_9.4-118-g2a4578.dirty

Font lock in inner blocks [was: Re: Differentiate source blocks in export?]

[Joost Kremers]

On Wed, Nov 25 2020, Eric S Fraga wrote:
> On Wednesday, 25 Nov 2020 at 09:37, Joost Kremers wrote:
>> I like this solution for the "Org-ness" of the syntax, and yes, =C-c
>> '= works, but font lock is gone...
>
> Yes, font lock is gone unfortunately but I am not sure why that
> is.  Something for somebody who understands the syntax highlighting code
> to investigate?

I guess font lock is based on the outer block, which in this case doesn't
correspond to any major mode, so there is no font lock. Or at least no
major-mode-based font lock. Org markup such as for =code= *is* font locked.

One could argue that this isn't entirely consistent with the fact that
=org-edit-special= *does* recognise the inner code block. It certainly would be
nice if font lock did, as well.

-- 
Joost Kremers
Life has its moments

Re: Differentiate source blocks in export?

[Joost Kremers]

On Tue, Nov 24 2020, Diego Zamboni wrote:
> And even (a bit) shorter:
>
> #+html:<div class="myclass">
> #+BEGIN_SRC python
> print(5)
> #+END_SRC
> #+html:</div>

Thanks everyone for your suggestions. I tried this one and it works great.
=myclass= of course ends up containing the =src= class, but as I just found out,
that's not a problem.

-- 
Joost Kremers
Life has its moments