wowchemy-hugo-modules 🚀 - Parsing Markdown in title?

Any developments in that direction? Or where in the code should edit this?

swvanderlaan on 4 Oct 2017

@swvanderlaan

Any developments in that direction? Or where in the code should edit this?

You may edit layouts/partials/publication_li_{simple,classic,detailed}.html
change

<span itemprop="name">{{ .Title }}</span>

in each file to

<span itemprop="name">{{ .Title | markdownify }}</span>

and in layouts/publication/single.html, too.

_Personally, I don't like to have the title markdownified, at least not by default, even for some titles containing italic math variables (I also have a lot of such titles)_

jagd on 4 Oct 2017

Keep in mind, the title that you provide for a publication (or talk, or anything similar) will get passed along as the element in the resulting HTML page. So if you add italics here with Markdown, browsers will show * in the page title.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/32523293?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="theodore-s-beers picture"> <strong>theodore-s-beers</strong> <span class="text-muted ml-1">on 8 Oct 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Also, if you add Markdown formatting to publication titles, pay attention to what it does to the section pager (the automatic links to the next or previous publication).</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/32523293?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="theodore-s-beers picture"> <strong>theodore-s-beers</strong> <span class="text-muted ml-1">on 8 Oct 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Very good comment @theodore-s-beers. This actually makes me reconsider whether I really want that—in other words, does the benefit of having italics in title really overrides the side effects?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/4000337?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="basille picture"> <strong>basille</strong> <span class="text-muted ml-1">on 9 Oct 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3731713875" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I'm closing this for now. Happy to re-consider exploring this option in the future if there's more demand for it.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/7537639?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="gcushen picture"> <strong>gcushen</strong> <span class="text-muted ml-1">on 2 Dec 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Just going to bump this thread-- it would be very nice to italicize portions of titles (e.g. species names) or insert sub-scripted values (e.g. chemical formulas)</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars3.githubusercontent.com/u/7264618?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="halexand picture"> <strong>halexand</strong> <span class="text-muted ml-1">on 16 Nov 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Another reason for enabling Markdown formatting is LaTeX markup for em dashes. For example, <code>--</code> is rendered as em dash <code>–</code> in other fields which leads to inconsistencies:<br /> <img loading="lazy" src="https://user-images.githubusercontent.com/8161292/60498222-7dcbcd00-9cb6-11e9-952d-c13e5d73195d.png" alt="Screenshot 2019-07-02 at 10 32 18" /><br /> => Notice the double single dash <code>--</code> instead of em dash <code>–</code> in the title.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/8161292?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="joe4dev picture"> <strong>joe4dev</strong> <span class="text-muted ml-1">on 2 Jul 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>A workaround in the current version of the theme (just for <code>li_citation.html</code>):</p> <pre><code class="prettyprint">diff --git a/layouts/partials/li_citation.html b/layouts/partials/li_citation.html index 4a34adf..939ff38 100644 --- a/layouts/partials/li_citation.html +++ b/layouts/partials/li_citation.html @@ -8,7 +8,7 @@ {{ partial "page_metadata_authors" . }} </span> ({{- .Date.Format "2006" -}}). - <a href="{{ .RelPermalink }}" itemprop="name">{{ .Title }}</a>. + <a href="{{ .RelPermalink }}" itemprop="name">{{ .Title | markdownify }}</a>. {{ if .Params.publication_short }} {{- .Params.publication_short | markdownify -}}. {{ else if .Params.publication }} @@ -22,7 +22,7 @@ <span itemprop="author" class="article-metadata li-cite-author"> {{ partial "page_metadata_authors" . }} </span>. - <a href="{{ .RelPermalink }}" itemprop="name">{{ .Title }}</a>. + <a href="{{ .RelPermalink }}" itemprop="name">{{ .Title | markdownify }}</a>. {{ if .Params.publication_short }} {{- .Params.publication_short | markdownify -}}, {{ else if .Params.publication }} </code></pre> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/8161292?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="joe4dev picture"> <strong>joe4dev</strong> <span class="text-muted ml-1">on 2 Jul 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>As a biologist I would also love this for species names in the title. Otherwise it looks like I've got poor attention to detail if my species names are not italicised in my own publication titles.</p> <p>I'm happy for it not to be enabled by default, but to at least have the option. Then individuals can decide if the benefits outweigh the costs.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars3.githubusercontent.com/u/6644980?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="jaseeverett picture"> <strong>jaseeverett</strong> <span class="text-muted ml-1">on 23 Jul 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3731713875" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Again, be careful with side effects if you make these changes. I mentioned the HTML <title> element earlier in the thread.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/32523293?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="theodore-s-beers picture"> <strong>theodore-s-beers</strong> <span class="text-muted ml-1">on 24 Jul 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I would also love to have this to italicize part of the text in the title! A few of my co-author papers do have species names in the title and it will be nice to be able to display those correctly.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/15334215?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="leewujung picture"> <strong>leewujung</strong> <span class="text-muted ml-1">on 10 Nov 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I was thinking about this recently, since I was using Pandoc to convert Markdown to HTML for another project, and I realized that it's capable of handling italics in titles—parsing where possible, and ignoring it (and removing the asterisks or underscores!) for the <code><title></code> element. But I don't know if that's possible with <a rel="nofollow noopener" target="_blank" href="https://github.com/russross/blackfriday">Blackfriday</a>.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/32523293?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="theodore-s-beers picture"> <strong>theodore-s-beers</strong> <span class="text-muted ml-1">on 10 Nov 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>One work around for bold or italics is Unicode via a tool like: <a rel="nofollow noopener" target="_blank" href="https://yaytext.com/bold-italic/.">https://yaytext.com/bold-italic/.</a> Note that this hard codes serif/sans serif for the font and breaks searching for that font. There could be other consequences to doing this that I don't know about.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/6829540?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="jpeacock29 picture"> <strong>jpeacock29</strong> <span class="text-muted ml-1">on 23 Nov 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I like that idea. It keeps compatibility with the HTML <code><title></title></code> attribute, at least for major desktop browsers (open question: are there other/mobile browsers that don't support UTF8 in their title?).<br /> I also started to replace LaTeX markup with unicode characters for that reason (e.g., <code>--</code> => <code>–</code>).</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/8161292?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="joe4dev picture"> <strong>joe4dev</strong> <span class="text-muted ml-1">on 23 Nov 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(260043863, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(260043863, 1);" onclick="rate(260043863, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(260043863, 2);" onclick="rate(260043863, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(260043863, 3);" onclick="rate(260043863, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(260043863, 4);" onclick="rate(260043863, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(260043863, 5);" onclick="rate(260043863, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/wowchemy-hugo-modules/499939678/add-utteranc-es-as-a-commenting-engine">Add Utteranc.es as a commenting engine</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/638764?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="jacebenson picture"> <strong class="pr-1" dir="ltr">jacebenson</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/wowchemy-hugo-modules/299322239/feature-suggestion-affiliation-logos">Feature suggestion: affiliation logos</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars1.githubusercontent.com/u/8569515?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="netw0rkf10w picture"> <strong class="pr-1" dir="ltr">netw0rkf10w</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/wowchemy-hugo-modules/372350288/generate-robots-txt-automatically">Generate robots.txt automatically</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/12930218?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="somnathrakshit picture"> <strong class="pr-1" dir="ltr">somnathrakshit</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/wowchemy-hugo-modules/357057689/talk-page-cannot-specify-co-authors">Talk page cannot specify co-authors</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars1.githubusercontent.com/u/332942?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ivlis picture"> <strong class="pr-1" dir="ltr">ivlis</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/wowchemy-hugo-modules/496259813/post-dates-missing-when-deploying-via-netlify">Post dates missing when deploying via Netlify</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars1.githubusercontent.com/u/819255?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="henningninneh picture"> <strong class="pr-1" dir="ltr">henningninneh</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/wowchemy/wowchemy-hugo-modules/issues/280" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>

Wowchemy-hugo-modules: Parsing Markdown in title?

Most helpful comment

All 15 comments