How to use hyphenator.js with Hugo?


I would like to use hyphenator.js with Hugo. Invoking the script in a footer template is no problem, the lang attribute is used out of the HTML header, but how could I add class=“hyphenate” to the paragraphs (suggested usage)?


@danstender Not sure how you’re going to get around this without client-side code. You can add vanilla HTML to your markdown files since it’s part of the spec, but that kind of defeats the purpose of markdown’s clean, semantic markup. What browsers do you need to support? What’s the element/class that surrounds the body copy that needs to be hyphenated? If you’re not familiar with JS and can give me sample code from your layout, it’s probably only a matter of a few lines…

Mhm, yes. It would be possible to code <p class=hyphenate>foo</p> into Markdown for every paragraph. Otherwise it would be needed to manipulate what is put out by the Markdown parser in .Content (BTW I’m using hyde-x).

Yeah, not a whole lot you can except maybe append that class to each paragraph before hyphenator.js does it’s work…

var allContentPs = document.querySelectorAll('.post p');
for(var i = 0; i < allContentPs.length; i ++){
//assuming you have classList support (ie, IE10+); otherwise...
//allContentPs[i].className += "hyphenate";

I found that hyphenator.js adds quite some delay for the page to finish rendering. I would be very interested if we could do the hyphenation at generation time.

Any ideas on this?

Using js sounds complicated. I’m doing it with a class where it’s needed, in templates, then specifying in css. Seems to work in modern browsers. Has anyone compared the methods?

Chrome not support css hyphenating, FF and IE do it well.

1 Like

@Mikhail, I see. So using javascript gets you consistency, if you can get it working.