kaushalmodi / ox-hugo

A carefully crafted Org exporter back-end for Hugo
https://ox-hugo.scripter.co
GNU General Public License v3.0
874 stars 132 forks source link

Code blocks exported from `src_foo` blocks know their language #638

Closed pdcawley closed 2 years ago

pdcawley commented 2 years ago

Given some org source like this:

Executing src_bash{sudo rm -rf /} is generally considered a foolish thing to do.

the current version of ox-hugo exports the following:

Executing `sudo rm -rf /` is generally considered a foolish thing to do.

it would be immensely useful to me if the resulting markdown looked something like:

Executing <code class='inline inline-bash'>sudo rm -rf /</code> is generally considered a foolish thing to do.

which allows me to distinguish in my stylesheets between actual code and generic code-ish stuff.

Essentially I want to be able to write, say:

code.inline::before {
    color: initial;
    content: "「";
}
code.inline::after {
    color: initial;
    content: "」";
}

in my stylesheets and have only src_foo{...} blocks wrapped in corner brackets.

pdcawley commented 2 years ago

There's code to do pretty much exactly this in ox-html.el in the org source.

kaushalmodi commented 2 years ago

I do that for my blog with this small workaround below, because Hugo doesn't yet support inline code block rendering natively.

It's a 2-part implementation, and so I haven't baked it into ox-hugo.

Making inline-src-block export to a custom shortcode

https://github.com/kaushalmodi/.emacs.d/blob/7cb6c4286f5ec2a4cd0852f7d49a8ff1c28f98ae/setup-files/setup-hugo.el#L36-L51

The inline_src shortcode

{{- transform.Highlight .Inner (.Get 0) (.Get 1 | default "")
    | replaceRE `^<div class="highlight"><pre [^>]+>((.|\n)+)</pre></div>$`
                `<span class="inline-src chroma">${1}</span>`
    | replaceRE `<span class="line">((.|\n)+)</span>[ \n]*</code>`
                `${1}</code>`
    | safeHTML -}}

I had opened this issue on Hugo (https://github.com/gohugoio/hugo/issues/9442), we also almost had a solution that would allow the built-in highlight shortcode to do the inline code rendering, but that's stuck in limbo for a while.


There's code to do pretty much exactly this in ox-html.el in the org source.

ox-html calls a function that renders the code highlighting that the user uses in their emacs session and hardcodes those colors in CSS around the inline src blocks. So I didn't go that route. I wanted the syntax highlighting scheme to be consistent with the Chroma syntax highlighter used by Hugo.

pdcawley commented 2 years ago

Right. I'm not really looking to highlight inline code, just have something that can be styled with CSS independently of ~code~ fragments.

On Wed, 18 May 2022 at 11:51, Kaushal Modi @.***> wrote:

I do that for my blog with this small workaround below, because Hugo doesn't yet support inline code block rendering natively.

It's a 2-part implementation, and so I haven't baked it into ox-hugo. Making inline-src-block export to a custom shortcode

https://github.com/kaushalmodi/.emacs.d/blob/7cb6c4286f5ec2a4cd0852f7d49a8ff1c28f98ae/setup-files/setup-hugo.el#L36-L51 The inline_src shortcode

{{- transform.Highlight .Inner (.Get 0) (.Get 1 | default "") | replaceRE ^<div class="highlight"><pre [^>]+>((.|\n)+)</pre></div>$ <span class="inline-src chroma">${1}</span> | replaceRE <span class="line">((.|\n)+)</span>[ \n]*</code> ${1}</code> | safeHTML -}}


I had opened this issue on Hugo (gohugoio/hugo#9442 https://github.com/gohugoio/hugo/issues/9442), we also almost had a solution that would allow the built-in highlight shortcode to do the inline code rendering, but that's stuck in limbo for a while.

— Reply to this email directly, view it on GitHub https://github.com/kaushalmodi/ox-hugo/issues/638#issuecomment-1129860080, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAABICAJ4MB6OQZBAMWTZ6DVKTDR7ANCNFSM5WH4D7ZA . You are receiving this because you authored the thread.Message ID: @.***>

kaushalmodi commented 2 years ago

@pdcawley This is now implemented! You can find an example in https://github.com/kaushalmodi/ox-hugo/pull/578#issuecomment-1132902554.

kaushalmodi commented 2 years ago

@pdcawley Or you can see this update ox-hugo test: https://ox-hugo.scripter.co/test/posts/inline-code-blocks/#using-custom-css-for-inline-src-blocks


Aside.. looks like we triggered a bug in Hugo.. the smart quotes rendering done by GoldMark happens inside the HTML code elements too!

image


See https://bug-smart-quote-conversion-in-code-element--hugo-mwe.netlify.app/posts/double-quotes-in-html-code-elements/