Add reference to external libraries in HTML

Stephanevg commented 7 years ago

Hi Iain,

Is it possible to add a reference to an external file in the HTML format, like a Jquery or a bootstrap reference?

Also, is it possible to add a class to a specefic HTML section/element?

that would

iainbrighton commented 7 years ago

Hi @Stephanevg - sorry I forgot that I needed to respond 😞.

There's nothing currently that will permit this but the foundations are there. We would need to add support for specifying external stylesheets with the Out-Html -Option parameter. All sections, paragraphs and tables support/have an Id property that we can use for the CSS class Id 😉. Note: there would be no way of guaranteeing that an Id specified in the document actually matchs up with an external reference/Id though.

iainbrighton commented 7 years ago

When defining styles, I have added a ClassId parameter (on my dev branch) that you can explicitly set. By default this is set the same as the style's Id parameter.

PS> $doc = Document 'Test' { Style 'My Style' }
PS> $doc.Styles.GetEnumerator() | ? { $_.Value.Name -eq 'My Style' } | %{ $_.Value }

Id              : MyStyle
Name            : My Style
Font            : {Calibri, Candara, Segoe, Segoe UI...}
Size            : 11
Color           : 000000
BackgroundColor :
Bold            : False
Italic          : False
Underline       : False
Align           : Left
ClassId         : MyStyle
Hidden          : False

You can override this property when defining a style like so:

PS> $doc = Document 'Test' { Style 'My Style' -ClassId 'CssClass' }
PS> $doc.Styles.GetEnumerator() | ? { $_.Value.Name -eq 'My Style' } | %{ $_.Value }

Id              : MyStyle
Name            : My Style
Font            : {Calibri, Candara, Segoe, Segoe UI...}
Size            : 11
Color           : 000000
BackgroundColor :
Bold            : False
Italic          : False
Underline       : False
Align           : Left
ClassId         : CssClass
Hidden          : False

I'll update the code to ensure that the ClassId property is used when generating the Html output. This will ensure that there's no breaking change in behaviour.

To support referencing external libraries, we could add an Html specific export option (not sure on the name) to add an external reference - something like this:

Export-Document -Options @{ CssLink = 'http://mycsshost.com/stylesheet.css' }

When specified, <link rel="stylesheet" type="text/css" href="http://mycsshost.com/stylesheet.css" /> will be added to the Html <head> element and no inline styles will be added to the html (presumably these would override any external definitions?).

Questions:

Would this work for you?
Do you foresee a need to add more than one external style sheet reference?
Are there any other external references you think might be needed?

iainbrighton / PScribo

Add reference to external libraries in HTML #35