Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for code in title #27

Open
keaising opened this issue May 12, 2019 · 2 comments
Open

Add support for code in title #27

keaising opened this issue May 12, 2019 · 2 comments

Comments

@keaising
Copy link
Contributor

keaising commented May 12, 2019

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
Copy link
Owner

qqpann commented May 12, 2019

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.
gohugoio/hugo#1778
I'll work on it when I have time. :)

@andreyorst
Copy link
Contributor

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:
image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants