HTML export: Use `<code>` for inline `RawElem` by OverflowCat · Pull Request #5884 · typst/typst

OverflowCat · 2025-02-18T01:33:55Z

laurmaedje · 2025-02-18T10:13:14Z

I changed the base branch to main since the change should persist beyond 0.13. The PR #5877 which merged directly into 0.13 was an exception because the code shouldn't be in main.

I'll separately cherry-pick to 0.13 after merge.

laurmaedje · 2025-02-18T10:13:37Z

Looking at this Stackoverflow discussion, I'm not 100% certain that these are this is the ideal representation, but in any case it's better than what we've got now. We can always revisit this later.

Thanks!

OverflowCat · 2025-02-18T11:24:05Z

Looking at this Stackoverflow discussion, I'm not 100% certain that these are this is the ideal representation, but in any case it's better than what we've got now.

Based on my discussion with @Myriad-Dreamin, currently Typst doesn't seem to have a way to specify HTML tags. This prevents us from distinguishing whether the user's raw content is code or samp (in addition to hr, ruby, etc. - HTML export doesn't seem to pay much attention to semantic HTML due to typst's lack of those elements). Also, these tags are rarely distinguished even in the Markdown ecosystem (I once wrote a remark plugin for this), and mainly rely on the browser's user agent stylesheet. Since CSS generation is currently unavailable, I believe this is a good practice for users.

laurmaedje · 2025-02-18T11:42:00Z

What do you mean with "Typst doesn't seem to have a way to specify HTML tags"? You mean that the raw element has no further metadata for this?

I was primarily wondering whether it should be <pre>..</pre> or <pre><code>..</code></pre>.

And then there's also the problem that, unlike Typst's inline raw element, <code> will collapse whitespace. But the whole whitespace stuff is a bit wonky all over the HTML export right now.

bastienvoirin · 2025-02-18T14:24:52Z

And then there's also the problem that, unlike Typst's inline raw element, <code> will collapse whitespace. But the whole whitespace stuff is a bit wonky all over the HTML export right now.

What about hardcoding inline CSS until we find a better solution?

<!-- raw(block: false) -->
<code style="white-space: pre-wrap;">...</code>
<pre style="display: inline;">...</pre>

<!-- raw(block: true) -->
<pre><code>...</code></pre>

// Pseudo-code, to be wrapped in a contextual block
#if target == "html" {
  show raw.where(block: false): set html.elem(
    "code",
    attrs: (style: "white-space: pre-wrap")
  )
}

Based on my discussion with @Myriad-Dreamin, currently Typst doesn't seem to have a way to specify HTML tags. This prevents us from distinguishing whether the user's raw content is code or samp (in addition to hr, ruby, etc. - HTML export doesn't seem to pay much attention to semantic HTML due to typst's lack of those elements). Also, these tags are rarely distinguished even in the Markdown ecosystem (I once wrote a remark plugin for this), and mainly rely on the browser's user agent stylesheet. Since CSS generation is currently unavailable, I believe this is a good practice for users.

I agree that it would be nice to eventually be able to emit code, samp, and kbd tags, but personally I wouldn't mind using a Typst package implementing something along the lines of this example taken from the 0.13-rc1 documentation:

#let kbd(it) = context {
  if target() == "html" {
    html.elem("kbd", it)
  } else {
    set text(fill: rgb("#1f2328"))
    let r = 3pt
    box(
      fill: rgb("#f6f8fa"),
      stroke: rgb("#d1d9e0b3"),
      outset: (y: r),
      inset: (x: r),
      radius: r,
      raw(it)
    )
  }
}

Press #kbd("F1") for help.

And if I understand correctly, the upcoming types & elements overhaul should make this even easier.

OverflowCat · 2025-02-19T13:43:01Z

Oh, my bad, I didn't notice that there is a html.elem.

The code in the <pre> tag is another issue — it seems that every Markdown renderer is doing it this way for now. There will be even more problems if we are going to output syntax-highlighted code in the future.

git download method fixed warinings documentation cli updater adaptation and clippy fixes enhanced documentation add git downloader default impl migrating from git2 to gitoxide crate for git downloads Add support for `c2sc` OpenType feature in `smallcaps` (typst#5655) Just add MathText SyntaxKind Basic SymbolElem addition Use SymbolElem in more places and add `char` cast for content Add SymbolElem to realization Update math TextElem layout to separate out SymbolElem Handle boxes and blocks a bit better in HTML export (typst#5744) Co-authored-by: Martin Haug <[email protected]> Tweak HTML pretty printing (typst#5745) Semantic paragraphs (typst#5746) Fix space collapsing for explicit paragraphs (typst#5749) Support first-line-indent for every paragraph (typst#5768) Fixed typo in the new outline docs (typst#5772) Resolve bound name of bare import statically (typst#5773) Fix typo in scripting.md (typst#5783) Modular, multi-threaded, transitioning plugins (typst#5779) Include images from raw pixmaps and more (typst#5632) Co-authored-by: PgBiel <[email protected]> Co-authored-by: Laurenz <[email protected]> Change type repr to short name (typst#5788) Disable cjk_latin_spacing in raw by default (typst#5753) Change the default math class of U+22A5 ⊥ UP TACK to Normal (typst#5714) Revert adding `flatten-text` to `image` (typst#5789) Refactor `Scope` (typst#5797) Enable HTML feature in docs generator (typst#5800) Scope deprecations (typst#5798) Fix typo in page documentation (typst#5804) Bump openssl from 0.10.66 to 0.10.70 (typst#5802) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Bump codex to 0.1.0 (typst#5805) Bump dependencies (typst#5808) Fix small copy-paste oversight (typst#5811) Bump more dependencies (typst#5813) Export target docs (typst#5812) Co-authored-by: Martin Haug <[email protected]> 0.13 changelog (typst#5801) Release Candidate 1 Autocomplete content methods (typst#5822) Documentation fixes and improvements (typst#5816) Fix docs outline for nested definitions (typst#5823) Document removals in changelog (typst#5827) Fix unnecessary import rename warning (typst#5828) Don't crash on image with zero DPI (typst#5835) Add warning for `pdf.embed` elem used with HTML (typst#5829) Add smart quotes for Bulgarian (typst#5807) Respect `par` constructor arguments (typst#5842) Bump `typst-assets` Fix autocomplete and jumps in math (typst#5849) Update documentation for `float.{to-bits, from-bits}` (typst#5836) `Gradient::repeat`: Fix floating-point error in stop calculation (typst#5837) Lazy parsing of the package index (typst#5851) Remove Linux Libertine warning (typst#5876) Bring back type/str compatibility for 0.13, with warnings and hints (typst#5877) More robust SVG auto-detection (typst#5878) HTML export: Use `<code>` for inline `RawElem` (typst#5884) --make-deps fixes (typst#5873) Update changelog (typst#5894) Version bump Fix HTML export of table with gutter (typst#5920) Fix comparison of `Func` and `NativeFuncData` (typst#5943) HTML export: fix elem counting on classify_output (typst#5910) Co-authored-by: Laurenz <[email protected]> Fix introspection of HTML root sibling metadata (typst#5953) Fix high CPU usage due to inotify watch triggering itself (typst#5905) Co-authored-by: Laurenz <[email protected]> Fix false positive for type/str comparison warning (typst#5957) Fix paper name in page setup guide (typst#5956) Fix curve with multiple non-closed components. (typst#5963) Fix docs example with type/string comparison (typst#5987) Correct typo (typst#5971) Make `array.chunks` example more readable (typst#5975) Hotfix for labels on symbols (typst#6015) Replace `par` function call in tutorial (typst#6023) Mention that `sym.ohm` was removed in the 0.13.0 changelog (typst#6017) Co-authored-by: Laurenz <[email protected]> Mark breaking symbol changes as breaking in 0.13.0 changelog (typst#6024) 0.13.1 changelog (typst#6025) Version bump dep min 1.81 use 1.81 in ci

laurmaedje changed the base branch from 0.13 to main February 18, 2025 10:07

Use <code> for inline RawElem

87c0ad5

laurmaedje force-pushed the inline-raw branch from 06fb996 to 87c0ad5 Compare February 18, 2025 10:11

laurmaedje enabled auto-merge February 18, 2025 10:13

laurmaedje added this pull request to the merge queue Feb 18, 2025

Merged via the queue into typst:main with commit 74e4f78 Feb 18, 2025
6 checks passed

laurmaedje pushed a commit that referenced this pull request Feb 18, 2025

HTML export: Use <code> for inline RawElem (#5884)

de16a2c

hongjr03 pushed a commit to hongjr03/typst that referenced this pull request Apr 16, 2025

HTML export: Use <code> for inline RawElem (typst#5884)

210cc44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

HTML export: Use `<code>` for inline `RawElem`#5884

HTML export: Use `<code>` for inline `RawElem`#5884
laurmaedje merged 1 commit intotypst:mainfrom
OverflowCat:inline-raw

OverflowCat commented Feb 18, 2025 •

edited

Loading

Uh oh!

laurmaedje commented Feb 18, 2025

Uh oh!

laurmaedje commented Feb 18, 2025

Uh oh!

Uh oh!

OverflowCat commented Feb 18, 2025

Uh oh!

laurmaedje commented Feb 18, 2025 •

edited

Loading

Uh oh!

bastienvoirin commented Feb 18, 2025 •

edited

Loading

Uh oh!

OverflowCat commented Feb 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

OverflowCat commented Feb 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

laurmaedje commented Feb 18, 2025

Uh oh!

laurmaedje commented Feb 18, 2025

Uh oh!

Uh oh!

OverflowCat commented Feb 18, 2025

Uh oh!

laurmaedje commented Feb 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bastienvoirin commented Feb 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

OverflowCat commented Feb 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

OverflowCat commented Feb 18, 2025 •

edited

Loading

laurmaedje commented Feb 18, 2025 •

edited

Loading

bastienvoirin commented Feb 18, 2025 •

edited

Loading