Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support more attributes in shortcodes for icon tag compatibility #34

Open
r-leyshon opened this issue Nov 4, 2023 · 3 comments
Open
Labels
enhancement New feature or request

Comments

@r-leyshon
Copy link

I've discovered some curious behaviour when attempting to copy paste HTML code from the fontawesome site for use in quarto docs. Initially it appears that using the HTML syntax does not work. However, including at least one quarto syntax icon in the document allows both syntax types to render as expected. Below is a shell script to help reproduce the behaviour.

# filename="make-reprex.sh"
#!/usr/bin/env bash
# uname -v
# Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
# brew update
# brew install cask quarto
# echo `quarto --version`
# 1.3.450
mkdir broken-icon
cd broken-icon
quarto add quarto-ext/fontawesome
touch broken-icon-reprex.qmd
echo """---
title: Broken Icon Reprex
---
<i class=\"fa-regular fa-face-sad-tear fa-bounce fa-lg\"></i>
""" > broken-icon-reprex.qmd
quarto render broken-icon-reprex.qmd --output bad-icon.html
echo """
{{< fa brands python >}}

""" >> broken-icon-reprex.qmd
quarto render broken-icon-reprex.qmd --output fixed-icon.html

@r-leyshon r-leyshon changed the title fontawesome icon tag compatability fontawesome icon tag compatibility Nov 5, 2023
@cderv
Copy link
Contributor

cderv commented Nov 6, 2023

Initially it appears that using the HTML syntax does not work. However, including at least one quarto syntax icon in the document allows both syntax types to render as expected.

This is because if you don't use the shortcode, then the fontawesome dependencies are not loaded into your document. The HTML deps are only inserted in document header when {{< fa ... >}} is used - same for LaTeX dependencies.

If the shortcodes is not used, the the extension does nothing.

@r-leyshon
Copy link
Author

I see, so would is it possible to style the icon in the same way as I have above while using shortcode only?

Alternatively, is there a way to ensure fontawesome dependencies get loaded to a document whether or not a shortcode is found?

@cderv
Copy link
Contributor

cderv commented Nov 6, 2023

Regarding your request of not using shortcodes, this is asked in there already

is it possible to style the icon in the same way as I have above while using shortcode only?

Currently there is no way to pass any attributes using shortcode. Only a few is supported

return pandoc.RawInline(
'html',
"<i class=\"fa-" .. group .. " fa-" .. icon .. size .. "\"" .. title .. label .. "></i>"
)

Alternatively, is there a way to ensure fontawesome dependencies get loaded to a document whether or not a shortcode is found?

See #30 for a wild trick of display: none

Otherwise, don't use the shortcode, and directly use the fontawesome dependencies using include-in-header and some raw HTML or use the Lua version of adding dependencies as mentioned in #30 (comment)

#30 should solve your problem. so I'll rephrase this issue as supporting more options

@cderv cderv changed the title fontawesome icon tag compatibility Support more attributes in shortcodes for icon tag compatibility Nov 6, 2023
@cderv cderv added the enhancement New feature or request label Nov 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants