h3 Tag (css format) not shown proper in Preview tab

ManfredSteiner commented 7 years ago

I am using a css file to format the markdown like README.md in GitHub. The h1 and h2 tags are formatted correct, the h3 tag is not formatted proper. It seems that font-weight, text-decoration and maybe some more attributes are ignored. When selecting View HTML in external browser, all the attributes are shown proper.

madflow commented 7 years ago

The basic HTML rendered in all previews (External Browser, Livepreview with JavaFX/without JavaFX) should be the same. Maybe there are some internal (=Livepreview) hacks I do not know of.

However:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>{%TITLE%}</title>
<style type="text/css">

    h1, h2, h3 {
        text-decoration: underline;
        font-weight: bolder;
        font-family: serif;
    }

</style>
</head>
<body>
{%CONTENT%}
</body>
</html>

yields perfectly underlined headings when I test it. Please post your markdown and css code. Thanks.

stengerh commented 7 years ago

The Swing-based preview uses a hard-coded HTML template because of Swing's limited HTML and CSS support. It therefore ignores the configured template completely. The hard-coded HTML template is equivalent to this:

<html><body>{%CONTENT%}

ManfredSteiner commented 7 years ago

@madflow, thanks for your response. It is what I have expected, that rendering will not show any differences. I try it again, and now it works, what was wrong yesterday? I have find out that in case of css-file change, a restart of Netbeans is needed. It isn't sufficient to switch between Source and Preview or to close the markdown file and open it again.

From my POV it's not needed to improve something, because change on css-files is not done every minute. If you know about this behavior, it's not a problem.

I have now now added some css links and divs in the configuration tab HTML Export:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="file:///usr/share/netbeans-8.2/github-1.css">
<link rel="stylesheet" type="text/css" href="file:///usr/share/netbeans-8.2/github-2.css">
<title>{%TITLE%}</title>
<style type="text/css">/*...*/</style>
</head>
<body>
<div id="readme"  class="readme boxed-group clearfix announce instapper_body md" style="zoom: 0.85">
<div class="markdown-body entry-content">
{%CONTENT%}
</div>
</div>
</body>
</html>

The two files github-1.css and github-2.css are downloaded from github. I also need to check FENCED CODE BLOCKS in tab Extensions. Now my markdown preview is very similar to the GitHub README.md look.

ManfredSteiner commented 7 years ago

There are some differences in the handling of the \<strong> tag. bold-problem

In the css-file it's defined as

strong {
    font-weight: 600;
}

If you define it as font-weight: bold; then it works.

madflow / flow-netbeans-markdown

h3 Tag (css format) not shown proper in Preview tab #117