syntax highlight in html #621

jahagirdar · 2019-03-05T21:45:00Z

Is it possible for the exported html to have syntax highlighting for the embedded code fragment?

optik-aper · 2019-03-11T14:09:34Z

Not native to vimwiki, as far as I know. You could include something like highlight.js, I'd think, but I've never used it.

gpanders · 2019-03-13T13:44:11Z

You can do this as follows using highlight.js (you could also use Google's prettify but highlight.js is easier to work with):

Copy the file default.tpl out of vimwiki/autoload/vimwiki/ into your own directory.
Modify your copy of default.tpl to add the following lines:

In <head>:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css" />

At the end of <body>:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script type="text/javascript">
    document.querySelectorAll('pre').forEach(block => hljs.highlightBlock(block));
</script>

Now tell Vimwiki that you want to use this template:

let g:vimwiki_list = [{'path': '/path/to/wikis', 'template_path': '/path/to/directory/containing/default.tpl'}]

Highlight.js will detect syntax automatically. So in your Vimwiki files, you just need to use the {{{ and }}} blocks to designate a <pre> section and highlight.js will take care of the rest.

You can also "hint" at the language to help highlight.js by using {{{class="python" (or whatever the language you are using is) in your Vimwiki file.

@EinfachToll @Nudin or any other maintainers: is there any desire to add support for this natively, at least through the inclusion of some kind of global option (i.e. g:vimwiki_html_head_tags and g:vimwiki_html_script_tags)? If so, I will create a PR.

hq6 · 2019-03-13T21:28:02Z

I am a new maintainer, and I think this would be nice to have natively.

However, I will defer to @EinfachToll and @Nudin until I get a better sense for what flavor of changes they think are appropriate, so you may want to hold off on this for now, while we handle the current PR's.

Nudin · 2019-03-18T16:27:33Z

Hey, I really like to have syntax-highlithing in the HTML-export. But I also think we shouldn't add JS to the default template since most users won't need it. And I think we should handle this and the math-rendering consistently.
Currently for the math rendering we explain in the help-file how to enable it. So we could do the same for this. On the other side I fear that the documentation if becoming to long so that people might stop reading it. I'm planing to create a wiki where to collect tips and tricks – documenting the how-to there and just referencing it from the help-file might be the second option.
The third option would be to have an option for both (highlight.js and mathjax and potentially more in the future) that can infuse the code to the templates and add a variable to the templates where to add these codes. So that you can enable them by a single boolean option. But I'm not sure about that yet. Any comments?

gpanders · 2019-03-18T17:55:22Z

@Nudin I think setting it in an option (default 0) is a fine idea. This would require only minimal documentation additions and would work out of the box for most users. Anyone who wants to tweak the default syntax highlighting/MathJAX options has the ability to do that by using a custom template.

optik-aper · 2019-03-18T20:49:28Z

I completely agree with @Nudin that this shouldn't be a default. I personally do everything I can to avoid a dependency on javascript and it's easy enough to add in as needed. When I initially looked at handling the syntax highlighting without highlight.js I decided to try rendering color markup for the code snippets through a python library (the name escapes me now) but I haven't actually sat down to get it working end to end and so I didn't suggest it. The .js solution is probably the easiest anyway.

HugoNikanor · 2019-03-21T20:33:06Z

A while ago I looked at integrating highlight(1) with VimWiki. I prefer that solution since it generates HTML tags for the code highlighting during the build step, not relying on javascript.

The problem I found with adding the feature was that the current HTML creator doesn't keep track of what's in the code block, but rather just creates start and end tags for them (I believe).

jahagirdar · 2019-03-25T13:38:37Z

For a non JS implementation how easy/difficult would it be to pass the codeblock through vim's builtin :TOhtml command?

ysftaha · 2021-10-14T22:05:20Z

I might be able to add this functionality using the tree-sitter cli. @hq6 Do you think I should tackle this as my first issue? @EinfachToll @Nudin Is this a proper solution to this?

ysftaha · 2021-10-15T06:27:21Z

Would love some guidance on enhancing this but was thinking something along the lines of this, I guess the command and the output could be options for the user so that it is not limited to tree-sitter, or pygmentize.:

diff --git a/autoload/vimwiki/html.vim b/autoload/vimwiki/html.vim 
index 0da3d81..80dbbff 100644 
--- a/autoload/vimwiki/html.vim 
+++ b/autoload/vimwiki/html.vim 
@@ -1628,6 +1628,27 @@ function! s:convert_file(path_html, wikifile) abort 
     let html_lines = s:html_insert_contents(html_lines, ldest) " %contents% 
+    let i = 0 
+    while i < len(html_lines) 
+      if html_lines[i] =~ '^<pre type=.\+>' 
+        let type = split(split(split(html_lines[i], 'type=')[1], '>')[0], '\s\+')[0] 
+        let start = i + 1 
+        let cur = start 
+ 
+        while html_lines[cur] !~ '^<\/pre>' 
+          let cur += 1 
+        endwhile 
+ 
+        let tmp = ('tmp'. split(system('mktemp -p . --suffix=.' . type, 'silent'), 'tmp')[-1])[:-2] 
+        call system('echo ' . shellescape(join(html_lines[start:cur - 1], '\n')) . ' > ' . tmp) 
+        call system('pygmentize -f html ' . tmp . ' -o ' . tmp . '.html') 
+        let html_out = system('cat ' . tmp . '.html') 
+        call system('rm ' . tmp . ' ' . tmp . '.html') 
+        let i = cur 
+        let html_lines = html_lines[0:start - 2] + split(html_out, '\n') + html_lines[cur + 1:] 
+      endif 
+      let i += 1 
+    endwhile 
     call writefile(html_lines, path_html.htmlfile) 
     let done = 1

brennen · 2021-10-15T08:07:02Z

This is probably a reasonable approach, but it would definitely need to be behind some configuration; we can't assume the external dependencies. Also keep in mind that it shouldn't be OS-dependent.

brennen · 2021-10-15T08:08:25Z

(I do note there's code to check OS, though I haven't worked with it enough to comment much on it. grep for is_windows.)

ysftaha · 2021-10-15T08:52:07Z

so the todo list looks something like this:

User defined program, and args
Option to forgo the whole highlighter
OS independence

brennen · 2021-10-15T15:35:46Z

Seems right. Probably off-by-default.

* issue#621: html highlighter * docs for issue#621 * removing windows support for issue#621 Co-authored-by: Tinmarino <tinmarino@gmail.com>

tinmarino · 2021-12-18T14:40:44Z

Fixed by #1181 1181

* issue#621: html highlighter * docs for issue#621 * removing windows support for issue#621 Co-authored-by: Tinmarino <tinmarino@gmail.com>

hq6 added the enhancement label Mar 24, 2019

This was referenced Oct 26, 2021

Adressing issue #621: adding HTML syntax highlighter for code listings. #1179

Closed

Addresses issue #621 #1181

Merged

tinmarino added a commit that referenced this issue Dec 18, 2021

Addresses issue #621 (#1181)

2141fde

* issue#621: html highlighter * docs for issue#621 * removing windows support for issue#621 Co-authored-by: Tinmarino <tinmarino@gmail.com>

tinmarino closed this as completed Dec 18, 2021

jls83 pushed a commit to jls83/vimwiki that referenced this issue Jan 17, 2023

Addresses issue vimwiki#621 (vimwiki#1181)

fd89164

* issue#621: html highlighter * docs for issue#621 * removing windows support for issue#621 Co-authored-by: Tinmarino <tinmarino@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

syntax highlight in html #621

syntax highlight in html #621

jahagirdar commented Mar 5, 2019

optik-aper commented Mar 11, 2019

gpanders commented Mar 13, 2019 •

edited

hq6 commented Mar 13, 2019

Nudin commented Mar 18, 2019

gpanders commented Mar 18, 2019

optik-aper commented Mar 18, 2019 •

edited

HugoNikanor commented Mar 21, 2019

jahagirdar commented Mar 25, 2019

ysftaha commented Oct 14, 2021

ysftaha commented Oct 15, 2021 •

edited

brennen commented Oct 15, 2021

brennen commented Oct 15, 2021

ysftaha commented Oct 15, 2021 •

edited

brennen commented Oct 15, 2021

tinmarino commented Dec 18, 2021

syntax highlight in html #621

syntax highlight in html #621

Comments

jahagirdar commented Mar 5, 2019

optik-aper commented Mar 11, 2019

gpanders commented Mar 13, 2019 • edited

hq6 commented Mar 13, 2019

Nudin commented Mar 18, 2019

gpanders commented Mar 18, 2019

optik-aper commented Mar 18, 2019 • edited

HugoNikanor commented Mar 21, 2019

jahagirdar commented Mar 25, 2019

ysftaha commented Oct 14, 2021

ysftaha commented Oct 15, 2021 • edited

brennen commented Oct 15, 2021

brennen commented Oct 15, 2021

ysftaha commented Oct 15, 2021 • edited

brennen commented Oct 15, 2021

tinmarino commented Dec 18, 2021

gpanders commented Mar 13, 2019 •

edited

optik-aper commented Mar 18, 2019 •

edited

ysftaha commented Oct 15, 2021 •

edited

ysftaha commented Oct 15, 2021 •

edited