Add support for code in title

keaising commented 5 years ago

Hello Pan,

When I use code in title, for example:

the result of TOC is broken into three lines, like this:

I try to fix it but I cannot find out where should I modify.

All of us will appreciate it if you can fix it.

如果我的英语没有太讲明白的话，问题是这样的：

在标题里插入代码会造成右上角生成的目录里，插入代码了的那行标题会折成多行。

我尝试自己处理结果没找到地方修改，后端工程师面对css和js很苦手。

不知道是bug还是feature，如果是bug的话麻烦修复，非常感谢！

qqpann commented 5 years ago

Hello Wang,

Thanks for opening the issue. This problems seems to be caused by code tag included in the TOC generated by hugo's {{ .TableOfContents }}. I couldn't fix it by editing code tag's CSS.

I'm considering stop using default {{ .TableOfContents }} as a workaround. https://github.com/gohugoio/hugo/issues/1778 I'll work on it when I have time. :)

andreyorst commented 4 years ago

I've kinda solved this issue with TOC by changing styles a bit:

#toc {
  margin-top: 1.5rem;
  padding: 0.7rem;
  text-overflow: ellipsis;
  overflow: hidden;
}
#toc * {
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

WIth these changes TOC looks like this:

I'm not sure if it is ok for everyone, but I'm ok with truncated headings.

qqpann / hugo-primer

Add support for code in title #27