Comments (18)
That's what I was looking at. How deep do you want to go implementing stuff like this, obsidian on its own is a whole massive rabbit hole.
from vivify.
Fair to say it's a popular request, reopening
But I have the same question as @jannis-baum above:
Is this similar to Github Style Alerts?
The biggest functional difference I can see is foldability
And another one is nestability, it apparently doesn't work with our github alert plugin, but I'd be interested in 'fixing' that.
i.e.:
Other than that it looks like something that could be achieved through theming the github alerts.
from vivify.
Also I might take a closer look at the markdown-it plugin markdown-it-obsidian-callouts that you mentioned in the original discussion, if that gives some ideas as well
from vivify.
Hi,
I like this idea with configuration in vivify-server...
And about icons you could use icons from https://lucide.dev/ I think.
When I am exporting MD file to PDF. I am using fancyicon. for a callouts icons.
It goes thru LaTeX and filters like this:
% Success Callout
\newtcolorbox{callout-success}{
colback=calloutBackground, % Dark background for the content area
colframe=calloutSuccess, % Green left border and title color
fonttitle=\bfseries, % Title font color same as pageFontColor
coltitle=calloutSuccess, % Title color matching the left border
colbacktitle=calloutBackground, % Title background matches the content area
coltext=pageFontColor,
boxrule=0.5mm, % Thin border
arc=4mm, % Rounded corners
leftrule=2mm, rightrule=0mm, toprule=0mm, bottomrule=0mm, % Only left border
left=2mm, right=2mm, top=2mm, bottom=2mm, % Padding inside the box
before skip=10pt, after skip=10pt, % Vertical space before and after the box
sharp corners, % Optional: to have sharp inner corners
titlerule=0mm, % No title underline or border
title=\faCheck\ Success, % Title with icon
}
and lua script:
function BlockQuote(el)
local first = el.content[1]
if first and first.t == "Para" then
local text = pandoc.utils.stringify(first.content[1])
local callout_type = text:match("%[!(%u+)%]")
if callout_type then
-- Remove the callout marker from the text
el.content[1].content[1].text = first.content[1].text:gsub("%[!%u+%]%s*", "")
-- Define the callout styles
local blocks = pandoc.List()
if FORMAT:match("html") then
local icon_html = ""
if callout_type == "NOTE" then
icon_html = "" -- info-circle
elseif callout_type == "TIP" then
icon_html = "" -- lightbulb
elseif callout_type == "IMPORTANT" then
icon_html = "" -- exclamation-triangle
elseif callout_type == "WARNING" then
icon_html = "" -- exclamation-circle
elseif callout_type == "CAUTION" then
icon_html = "" -- exclamation-triangle
elseif callout_type == "ABSTRACT" then
icon_html = "" -- book
elseif callout_type == "TODO" then
icon_html = "" -- check-square
elseif callout_type == "SUCCESS" then
icon_html = "" -- check
elseif callout_type == "QUESTION" then
icon_html = "" -- question-circle
elseif callout_type == "FAILURE" then
icon_html = "" -- times-circle
elseif callout_type == "DANGER" then
icon_html = "" -- bomb
elseif callout_type == "BUG" then
icon_html = "" -- bug
elseif callout_type == "EXAMPLE" then
icon_html = "" -- code
elseif callout_type == "QUOTE" then
icon_html = "" -- quote-left
end
local start_html = string.format(
'<div class="callout callout-%s"><strong>%s %s</strong>',
callout_type:lower(),
icon_html,
callout_type
)
blocks:insert(pandoc.RawBlock("html", start_html))
blocks:extend(el.content)
blocks:insert(pandoc.RawBlock("html", "</div>"))
return blocks
elseif FORMAT:match("latex") then
-- Map callout types to LaTeX tcolorbox environments
local env_name = "callout-" .. callout_type:lower()
local start_latex = string.format("\\begin{%s}", env_name)
blocks:insert(pandoc.RawBlock("latex", start_latex))
blocks:extend(el.content)
blocks:insert(pandoc.RawBlock("latex", "\\end{" .. env_name .. "}"))
return blocks
end
end
end
end
return {
{ BlockQuote = BlockQuote },
}
from vivify.
In case the icons need to be accessible from CSS
Yeah as I imagine it right now, they'd need to be
Note that also what we were talking about here #162 (comment) is always possible by either inlining the whole svg or putting it as a file in your configs or something
I definitely have enough to start making a PR in the not too distant future, but think I need help with this part:
we could consider symlinking the Octicon SVGs from the Node plugin into our static assets to compile them into the executable the way I recently did it for KaTeX and Mermaid.
:)
from vivify.
Note that also what we were talking about here #162 (comment) is always possible by either inlining the whole svg or putting it as a file in your configs or something
Yes, true, I had already forgotten about this again haha. This is a great option for custom configs. For Vivify itself I think we should always try to go for the symlinking approach so that things keep themselves up to date and we don't have manual copies laying around. I'll help with that :)
from vivify.
Is this a full superset of GitHub alert blocks? I.e. if we include this replace the GitHub alert plugin with this, will the GitHub blocks still work?
EDIT: Ah, by the way, I think the person who replied to that discussion is on windows so Vivify is not (yet) applicable for them. The OP I haven't seen before, but I would wait until we hear from them here that they would want this here before adding it :)
from vivify.
obsidian on its own is a whole massive rabbit hole.
Yep, exactly. That's why I would only do it if people ask for it explicitly. Also, I'm not familiar with Obsidian, but when I opened their page for a second it looked like a huge thing including the editor and viewer and all that so I don't know if people even have files from that laying around that they would want to look at in Vivify/edit in Vim
from vivify.
Then lets close for now as not planned? and revisit if there's demand for it.
from vivify.
Yes sounds good! We can reopen if @ Praczet stops by and/or someone else wants it as well.
from vivify.
I'm also very interested, hopefully it will be implemented one day 🙂.
from vivify.
Also looking for this feature 👍
from vivify.
Oh hold on, there's mention about Obsidian callout syntax support in the Github alert plugin's readme:
https://github.com/antfu/markdown-it-github-alerts?tab=readme-ov-file#customization
In order to also support Obsidian callouts syntax it is possible to allow any type of markers with the following setting:
md.use(MarkdownItGitHubAlerts, { markers: '*' })
So.. if we simply enable that, how much would that solve?
from vivify.
Oh hold on, there's mention about Obsidian callout syntax support in the Github alert plugin's readme:
https://github.com/antfu/markdown-it-github-alerts?tab=readme-ov-file#customization
In order to also support Obsidian callouts syntax it is possible to allow any type of markers with the following setting:
md.use(MarkdownItGitHubAlerts, { markers: '*' })So.. if we simply enable that, how much would that solve?
If no one specifies what exactly they are looking for maybe let's just do this, make a release and then see if anyone complains?🙈
from vivify.
So hmm I'm not quite sure how useful this is:
> [!note]
> hi
> [!info]
> jajdjdj
So it allows to give any id like > [!id]
and then gives us a wholly unstyled <div class="markdown-alert markdown-alert-id">
First thing I notice is we need a generic styling for alert of any 'id'
So it would be easy to allow to customize any arbitrary alert type, but with a bit of effort because a custom icon would need to be provided too.
Also note that this is already possible:
> [!important] foo
> abc
> [!caution] bar
> def
> [!note] baz
> ghi
> [!warning] qux
> jkl
> [!tip] xyzzy
> mno
But again info for people who request this: we aren't familiar with Obsidian usage and currently may have a severe lack of understanding what the expectation is here :)
from vivify.
Hi,
Finally I (ok we) managed to force my Manjaro to work with vivify-server and as I kind of started this discussion I will tell you what I wanted:
- That preview is rendering callouts at all - which here is done.
- Other type? I am using quite often:
- question
- quote
- todo
- example
- Nested callouts- I don't need, but it could be ok to have it
- Folding - personally - I don't need
When I was looking today in your source code to check why my question-callout is not rendered I noticed that you use markdown-it-github-alert. The md.use
md.use(MarkdownItGitHubAlerts, {
markers: '*'
})
would work if in neovim you could in config (setup) add styling something like this:
{ "jannis-baum/vivify.vim"
config = function()
require("vivify").setup({
"markdown-alerts = {
"question" = {
css={},
icon ={},
-- etc
}
}
})
end,
},
But this is what I would like to have, since I am using vivify-server only with neovim.
Did I thank you for a help with vivify-server
and implementing the github alerts? If not: thank you.
from vivify.
Hey thanks for the input
Ok so as far as I understand the main thing would be to be able to use any custom [!foo]
and then have the associated, user-configured style and icon
It would be probably better to do the user customization on main Vivify's side so it will work both for standalone viv
and also any future editors someone might wanna plug into Vivify
So makes me wonder if it's enough to set the markers: '*'
and then you can customize any arbitrary keyword for example [!foo]
~/.vivify/config.json
{
"styles": "~/.vivify/styles.css"
}
~/.vivify/styles.css
.markdown-alert-foo {
/* Set any CSS you want */
}
^ This is generally what I'd suggest at this point, there's a couple more details:
- Where do the svg icons come from
- Might want to set some kinda sensible default style for
.markdown-alert-*
(I've got an idea)
If you've got some objections to this approach due to me missing something, let us know 😄
@jannis-baum What do you think?
from vivify.
@jannis-baum What do you think?
@tuurep sounds good what you said! The configuration should definitely happen on main Vivify as you said, editor plugin config only makes sense for things specific to the editor. This is viewer-topic.
About the icons, I would strongly prefer to avoid introducing a second source of icons. The Octicons probably have something suitable. If not, I'd rather switch to whatever new source for everything instead of having two.
In case the icons need to be accessible from CSS, we could consider symlinking the Octicon SVGs from the Node plugin into our static assets to compile them into the executable the way I recently did it for KaTeX and Mermaid. Just have to keep an eye on how much bigger this makes the executable, but I'd guess it'll be fine
from vivify.
Related Issues (20)
- Add TOC support for Markdown HOT 15
- Switch to file endpoint HOT 8
- Improve customization snippets
- Cursor sync offset/more centered (like Vim's `scrolloff`) HOT 4
- Fix decoding VIV_PATH
- Parse empty files
- Fix Release CI
- Improve parsing (almost) empty files
- VIV_PORT environment variable not set automatically HOT 22
- Improve error reportability
- Upgrade dependencies
- vivify-server crashes: Segmentation fault HOT 32
- Terminal exit fails when spawning vivify-server HOT 3
- Show vivify-server path in bug report
- Improve install robustness
- YAML formatter HOT 4
- Homebrew installation missing libraries HOT 2
- Support .config directory
- Config path enhancements
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vivify.