search

yzhang-gh / vscode-markdown

Markdown All in One
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
MIT License
2.91k stars 323 forks source link

Random coloring of highlited texts #503

Closed crystalfp closed 5 years ago

crystalfp commented 5 years ago

Issue Type: Bug

What is the problem?

The text marked bold, italic or bold-italic is colored apparently at random when the extension is enabled.

How can I reproduce it?

Put the following text in bug.md file.

alcune riflessioni in merito alla necessità di ipotizzare un **nuovo «paradigma di apprendimento»** **fondato sull’integrazione fra le nuove tecnologie e i percorsi didattici tradizionali,** in un’ottica inclusiva”.

Open bug.md

With the extension disabled, the two bold texts are colored blue (my theme is Monokai).

Now enable the extension and restart VScode. The first text is not colored (except the asterisks that are a dim gray), the second is colored correctly.

Is there any error message in the console?

There is no error show.

Thanks for looking! mario

Extension version: 2.4.2 VS Code version: Code 1.37.0 (036a6b1d3ac84e5ca96a17a44e63a87971f8fcc8, 2019-08-08T02:33:50.993Z) OS version: Windows_NT x64 10.0.18362

System Info |Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz (8 x 2904)| |GPU Status|2d_canvas: enabled
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
native_gpu_memory_buffers: disabled_software
oop_rasterization: disabled_off
protected_video_decode: enabled
rasterization: enabled
skia_deferred_display_list: disabled_off
skia_renderer: disabled_off
surface_synchronization: enabled_on
video_decode: enabled
viz_display_compositor: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|15.81GB (6.03GB free)| |Process Argv|--file-uri file:///d%3A/Montessori/Libro%20-%20Tecnologia%20in%20famiglia/Tecnologia%20in%20famiglia.code-workspace| |Screen Reader|no| |VM|0%|
crystalfp commented 5 years ago

plain theme strikes again! Who knows why it has been re-enabled and by who. Certainly not by me. Disabling it again and the problem has been solved. Sorry for the noise mario

crystalfp commented 5 years ago

One info more. If I disable "Plain Theme" from the settings editor, in the json file the setting "markdown.extension.syntax.plainTheme": false does not appear. Maybe this is the problem: the default seems to be true. Now I added it manually to the settings.json file.

yzhang-gh commented 5 years ago

The default should be false 😳. Do you happen to have changed it in the workspace settings?

crystalfp commented 5 years ago

No. No trace of the setting. As I said before, to be on the safe side, I added the "markdown.extension.syntax.plainTheme": false to settings.json.

Do I remember wrongly or there was a time in which italic-marked text was rendered in italic, bold in bold and so on? Should I open a feature request?

Thanks for your patience! mario

yzhang-gh commented 5 years ago

Thank you.

I think it is already done by themes. For example,

Dark+ (default VSCode theme) image

crystalfp commented 5 years ago

OK! I switched to Dark+ and now Markdown is rendered as I like. When I will have time, I will explore other themes that render Markdown "correctly". Thanks! mario

Lemmingh commented 5 years ago

@crystalfp

Do I remember wrongly or there was a time in which italic-marked text was rendered in italic, bold in bold and so on?

Was the Monokai you referred to the VS Code built-in Monokai theme (vscode.theme-monokai)?

As what yzhang-gh said, the styles of italic and bold Markdown element in editor are handled by themes. I examined the built-in Monokai, and I think it's the root of the problem.

Compared with Dark+, the Monokai theme file <VS Code install location>/resources/app/extensions/theme-monokai/themes/monokai-color-theme.json misses some styles for markup scopes.

My solution is

Note

Before we start, you need to know how to develop a VS Code color theme. See Color Theme | Visual Studio Code Extension API.

  1. Create a new theme

    Just copy the folder <VS Code install location>/resources/app/extensions/theme-monokai into your user extension directory (usually <user profile>/.vscode/extensions). Then modify publisher and name in package.json; you also need to modify label to distinguish your theme from the built-in one (Thank crystalfp for reminding me)

  2. Copy <VS Code install location>/resources/app/extensions/theme-defaults/themes/dark_defaults.json to themes/dark_defaults.json

  3. Create a file themes/style-supplement.json whose content is

    {
    "$schema": "vscode://schemas/color-theme",
    "name": "Supplement to Styles",
    "include": "./dark_defaults.json",
    "tokenColors": [
        {
            "scope": "markup.bold",
            "settings": {
                "fontStyle": "bold"
            }
        },
        {
            "scope": "markup.heading",
            "settings": {
                "fontStyle": "bold"
            }
        },
        {
            "scope": "markup.italic",
            "settings": {
                "fontStyle": "italic"
            }
        },
        {
            "scope": "markup.underline",
            "settings": {
                "fontStyle": "underline"
            }
        }
    ]
}

  4. Add the following to themes/monokai-color-theme.json just before the line "type": "dark",

        "$schema": "vscode://schemas/color-theme",
    "include": "./style-supplement.json",

  5. You can modify other things if you like

BTW, @yzhang-gh

It seems that many people have no idea of the things that are not controlled by your extension. Could you add a section to README to document them?

Here are what I've noticed

Thank you.

crystalfp commented 5 years ago

@Lemmingh Thanks for the steps to change a theme! As soon as I have time, I will try them. I solved the immediate problem by switching the theme to Dark+.

crystalfp commented 5 years ago

Thanks @Lemmingh ! It works as a charm. Only one thing missing. In step 1 you have to change also "label" field.

yzhang-gh commented 5 years ago

@Lemmingh Thanks for sharing!

It seems that many people have no idea of the things that are not controlled by your extension. Could you add a section to README to document them?

A problem may be, many people don't read the README at all 😂. (The README is already too long for them.) For now, it is not a big problem. We can consider adding an explanation if we get much more this kind of issues.