zooming preview with code blocks and mermaid charts causes text to render over code or chart

Viewed 42

I wanted to upload an image, but it thought my .png was empty.

In any case, when zooming in with command + the text below the code block begins to be rendered over the chart. This is also true of mermaid charts.

Noticing that the same thing happens with code blocks.

2 Answers

I think I have a solution for this in place. It may be in the 1106 build, but definitely by 1107. Just having it recalculate all of the fixed heights when either of the zoom menu items are triggered.

Ah, yeah, this makes sense. In order to do proper layout, Marked sets a fixed height on code blocks. It refreshes when the file updates or refreshes, but if you just change the zoom, the height doesn't update. You can just hit Cmd+R to refresh at the desired zoom level. Changing zoom level while viewing is not such a common thing that I see a need to work around this right away.

You're right, I just checked changelogs and it won't be out until 1107 is released. Which could be today, but gotta figure a couple things out first.

I can't repro this with the mermaid chart, but it did repro with the code block -- behaves the same way.

Video: https://youtu.be/jfCLJF7Y-dQ

In case the source markdown is helpful:

Lorem Ipsum Document

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

graph TD
    A[Sandwich] --> B{Has Pickles?}
    B -->|Yes| C[Consult the Oracle]
    B -->|No| D[Add Pickles]
    C --> E[Oracle Says Maybe]
    E --> F[Flip a Coin]
    F -->|Heads| G[Eat Sandwich]
    F -->|Tails| H[Question Reality]
    H --> I[Existential Crisis]
    I --> J[Order Pizza Instead]
    D --> G
    G --> K[Satisfaction]
    J --> K
    K --> L{Still Hungry?}
    L -->|Yes| A
    L -->|No| M[Take a Nap]

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula ut dictum pharetra, nisi nunc fringilla magna, in commodo elit erat nec turpis. Ut pharetra augue nec augue.

Nam dui ligula, fringilla a, euismod sodales, sollicitudin vel, wisi. Morbi auctor lorem non justo. Nam lacus libero, pretium at, lobortis vitae, ultricies et, tellus. Donec aliquet, tortor sed accumsan bibendum, erat ligula aliquet magna, vitae ornare odio metus a mi. Morbi ac orci et nisl hendrerit mollis. Suspendisse ut massa. Cras nec ante. Pellentesque a nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

import os
import sys
from typing import List, Optional


class ApplicationConfig:
    """Base configuration for the application."""

    def __init__(self, name: str, debug: bool = False):
        self.name = name
        self.debug = debug
        self.plugins: List[str] = []

    def load_plugins(self, plugin_dir: Optional[str] = None) -> None:
        if plugin_dir is None:
            plugin_dir = os.path.join(os.getcwd(), "plugins")
        for entry in os.listdir(plugin_dir):
            if entry.endswith(".py"):
                self.plugins.append(entry)

    def run(self) -> int:
        print(f"Starting {self.name}...")
        if self.debug:
            print(f"Debug mode enabled. Loaded plugins: {self.plugins}")
        return 0


if __name__ == "__main__":
    config = ApplicationConfig(name="my-app", debug=True)
    config.load_plugins()
    sys.exit(config.run())

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Lorem Ipsum Document

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

graph TD
    A[Sandwich] --> B{Has Pickles?}
    B -->|Yes| C[Consult the Oracle]
    B -->|No| D[Add Pickles]
    C --> E[Oracle Says Maybe]
    E --> F[Flip a Coin]
    F -->|Heads| G[Eat Sandwich]
    F -->|Tails| H[Question Reality]
    H --> I[Existential Crisis]
    I --> J[Order Pizza Instead]
    D --> G
    G --> K[Satisfaction]
    J --> K
    K --> L{Still Hungry?}
    L -->|Yes| A
    L -->|No| M[Take a Nap]

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula ut dictum pharetra, nisi nunc fringilla magna, in commodo elit erat nec turpis. Ut pharetra augue nec augue.

Nam dui ligula, fringilla a, euismod sodales, sollicitudin vel, wisi. Morbi auctor lorem non justo. Nam lacus libero, pretium at, lobortis vitae, ultricies et, tellus. Donec aliquet, tortor sed accumsan bibendum, erat ligula aliquet magna, vitae ornare odio metus a mi. Morbi ac orci et nisl hendrerit mollis. Suspendisse ut massa. Cras nec ante. Pellentesque a nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

import os
import sys
from typing import List, Optional


class ApplicationConfig:
    """Base configuration for the application."""

    def __init__(self, name: str, debug: bool = False):
        self.name = name
        self.debug = debug
        self.plugins: List[str] = []

    def load_plugins(self, plugin_dir: Optional[str] = None) -> None:
        if plugin_dir is None:
            plugin_dir = os.path.join(os.getcwd(), "plugins")
        for entry in os.listdir(plugin_dir):
            if entry.endswith(".py"):
                self.plugins.append(entry)

    def run(self) -> int:
        print(f"Starting {self.name}...")
        if self.debug:
            print(f"Debug mode enabled. Loaded plugins: {self.plugins}")
        return 0


if __name__ == "__main__":
    config = ApplicationConfig(name="my-app", debug=True)
    config.load_plugins()
    sys.exit(config.run())

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.