Non-Standard Markdown Rendering

jowilhnson commented 1 year ago

Describe the bug

Text in Blockquotes should not be italicized by default

Non-standard rendering is causing Bold Text in an Unordered List inside a Blockquote to be displayed enclosed in quotation marks.

Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-ehnvp9?file=src/BaseButton.story.vue

System Info

System:
    OS: Linux 5.15 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
    Memory: 512.55 MB / 15.56 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 8.4.1 - ~/.nvm/versions/node/v16.13.0/bin/npm
  npmPackages:
    @histoire/plugin-vue: ^0.15.8 => 0.15.8 
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0 
    histoire: ^0.15.8 => 0.15.8 
    vite: ^4.1.3 => 4.1.3

Used Package Manager

yarn

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 1 year ago

Start a new pull request in StackBlitz Codeflow.

histoire-vue3-starter-ehnvp9 (Open reproduction)

jowilhnson commented 1 year ago

Both the italics and quotes seem to be default Tailwind styling for blockquotes, and being applied by the htw-prose class

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"] *)) {
    font-style: italic;
}

.htw-prose :where(blockquote p:first-of-type):not(:where([class~="htw-not-prose"] *))::before {
    content: open-quote;
}

.htw-prose :where(blockquote p:last-of-type):not(:where([class~="htw-not-prose"] *))::after {
    content: close-quote;
}

It seems like .htw-not-prose is intended to be applied, as it is included in the div that's being passed to the syntax highlighting setup in the createMarkdownRenderer function. But I'm not seeing those divs or their classes appearing in the final rendered doc tab, instead the markdown is rendered directly inside this div, so htw-not-prose is never applied to the rendered markdown.

<div class="htw-prose dark:htw-prose-invert htw-p-4 htw-max-w-none" data-test-id="story-docs">

histoire-dev / histoire