Embedding CSS into output

[jeffrimko]

Is there a way to embed CSS into the output HTML? The copycss attribute does not appear to work when used as follows: const options = opal.hash({doctype: 'article', header_footer: true, attributes: ['copycss']});

The HTML always ends up with the following: <link rel="stylesheet" href="./asciidoctor.css">

I am using AsciidoctorJS version 1.5.0 in a NodeJS application.

[ggrossetie]

Hello @jeffrimko

Yes this should work with the latest release. You should use the latest version npm install asciidoctor.js@1.5.5-3.

Please note that there's a new wrapper API, so you could also simplify your code. For instance:

//const options = opal.hash({doctype: 'article', header_footer: true, attributes: ['copycss']});
const options = {doctype: 'article', header_footer: true, attributes: ['copycss']};

Please let me know if this is working for you.

[jeffrimko]

Thanks for the feedback! So I updated to the recommended version but it's still acting the same. Strangely, the options change does not seem to work either, without the opal.hash() results in the following error: Uncaught TypeError: d.$dup is not a function

When using the original options code, the following is an excerpt from the output:

<meta name="generator" content="Asciidoctor 1.5.5">
<title>Hello World</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
<link rel="stylesheet" href="./asciidoctor.css">

Seems like the 1.5.5 code is being used based on the version string in the output. Also, I confirmed that package.json contains "asciidoctor.js": "^1.5.5-3",

Not sure what's going on, I'll take a further look soon.

[mojavelinux]

The problem is that you aren't setting the safe mode. The default when using the API is secure, as documented at http://asciidoctor.org/docs/user-manual/#set-the-safe-mode-in-the-api. The behavior you're observing is a security feature.

[jeffrimko]

Okay, thanks for the info! I will test this out soon and post the results.

[jeffrimko]

Still running into an issue but it seems to be related to something else. I am building an Electron app and think the JAVASCRIPT_PLATFORM code is setting the platform to browser instead of node which is causing an issue.

The specific error being thrown is Uncaught IOError: No such file or directory: css/asciidoctor.css. Rather than opening the file (which does exist at that path), the AsciidoctorJS code seems to be attempting to make a GET request which fails. Haven't had too much time to look into the issue further. Should have more time to investigate soon.

[ggrossetie]

Hey @jeffrimko

Still running into an issue but it seems to be related to something else. I am building an Electron app and think the JAVASCRIPT_PLATFORM code is setting the platform to browser instead of node which is causing an issue.

You are right, @ldez hit the same issue with the AsciiDoc preview for the Atom editor. The main issue is that window is defined in an Electron environment.

The good news is that I'm already working on this issue https://github.com/asciidoctor/asciidoctor.js/pull/263 :wink: Once this pull request is merged, Electron environment should be correctly detected. And because guessing the JavaScript environment is not an easy task you will also be able to explicitly define your environment:

var Asciidoctor = require('asciidoctor.js');
var config = {
  runtime: {
    platform: 'node',
    engine: 'v8',
    framework: 'framework'
   }
};
var asciidoctor = Asciidoctor(config); 

[jeffrimko]

Thanks for the info! Would you like me to close this issue now or wait until the updates can be tested?

[ggrossetie]

You are welcome. No you can keep it open because I want to make sure that this feature is working in an Electron app :smile:

[jeffrimko]

Okay, will do!

[jeffrimko]

Finally got around to testing out v1.5.5-4. Looks like the issue is fixed now. Thanks!

Tested using the following code:

const Asciidoctor = require('asciidoctor.js');
const asciidoctor = Asciidoctor();
const options = {safe: 'unsafe', doctype: 'article', header_footer: true, attributes: ['copycss']};
// ...
var output = asciidoctor.convert(text, options);

[mojavelinux]

Thanks for testing!

[ggrossetie]

Cool, thanks for the follow-up @jeffrimko !