Search code examples
c#htmlwpfchromium-embeddedcefsharp

How do I load a local HTML into CefSharp that contains a CSS-stylesheet?

OS: Windows 7
Cef Version: Wpf

Hello all,
I'm trying to load a local HTML file (https://pastebin.com/wgnTKcpS) that uses the MathQuill formula editor (http://mathquill.com). However, when using this code:

MathQuillBrowser.IsBrowserInitializedChanged += (s, e) =>
{
    if (MathQuillBrowser.IsBrowserInitialized)
        MathQuillBrowser.LoadHtml(File.ReadAllText(Environment.CurrentDirectory + "/mathquill.html"), "https://somefakeurl-mathquill.com");
};

to load the HTML file into the ChromiumBrowser, the MathQuill span doesn't show up in the ChromiumBrowserat the Wpf window. What am I doing wrong?

How to reproduce the problem:

  • Create a new Wpf Application in VS and install CefSharp with Nuget
  • Go to the bin\x86\Debug file of the project and put the HTML mentioned above (in a file named mathquill.html) and the latest version of MathQuill.
  • Create a ChromiumBrowser control and add it to the main control of some window.
  • Load the Html into ChromiumBrowser with the code mentioned above.

Important note: The C# code above works (html elements show up) with elements that don't load external CSS stylesheets. Also, the html code works as expected if you open it in a browser like Chrome.

Solution

  • Cef browser doesn't know where the CSS file is, so it can't find it. The easy solution is to use a CDN (https://cdnjs.com/libraries/mathquill, for MathQuill).