handsome结合typecho的编辑器其实是挺不错的,但还是没有一些比较常见的功能。我们可以利用markdown特权模式来实现它。
本文的思路来自UCW大佬,起因是我想在文章内将部分文字变换颜色。但typecho和handsome自带的编辑器没带这个功能,而我并不想为此专门安装一个插件。
我在群里提出这个想法后,ucw大佬告诉我可以利用内联html
来实现这个需求,内联html
在目前的正式版typecho里是需要使用特权模式来实现的,方法就是在代码的上面和下面均加入!!!
三个感叹号。根据我的实际操作和个人的理解,特权模式会将该区域变成不再使用markdown的编码,而是将代码直接使用html的编码来表现出来。这样就大大拓展了显示信息的方式。
据UCW大佬所说,typecho的开发版可以自动内联html的编码了,不在需要特权模式。我没有去验证这段话的真实性。只不过在目前看来特权模式是唯一一种无需插件即可扩展typecho编辑器功能的方案。
我在下面演示两种特权模式的使用方案。
- 将指定文字转为特定颜色。
代码为:
三个感叹号
<span style="color:red">将文字变化为红色</span>
三个感叹号
将这个代码直接输入编辑器内显示效果是这样的。
将文字变化为红色扩展一下,即可实现一段话内部分文字是红色:
三个感叹号
部分文字变成了<span style="color:red">红色</span>
三个感叹号
部分文字变成了红色- 使用CSS来实现类似「黑幕」的效果
这个是我从这篇博客里获得的经验。
事实上它写的教程并不太对。按照它的方法,最终直接在文章里面显示了:<span class="heimu" title="鼠标放上去显示的文字">要隐藏的文字</span>
,而不是黑幕遮挡。并且该博客完全禁止了评论,而它的作者并不是和我在一个handsome用户群里,我一开始不知道怎么解决。
此时可靠的UCW大佬出现了,他猜测可能是需要特权模式才能实现。经过我的测试,果然如此。
我在这里转述下:如何使用CSS来实现类似「黑幕」的效果。
首先将这段CSS代码加到网站(即handsome的主题设置外观)的自定义CSS处:
.heimu,.heimu a{
background-color: #252525;
color:#252525;
text-shadow: none;
}::selection{
background:#9ab0c0;
color:#fff;
}
.heimu:hover,.heimu:hover a{
transition:color .13s linear;
color:#fff;
}
效果如下所示:
接下来就是设置文字效果了:
代码是这样的:
三个感叹号
<span class="heimu" title="鼠标放上去显示的文字">要隐藏的文字</span>
三个感叹号
显示的效果如下:
要隐藏的文字版权属于:寒夜方舟
本文链接:https://www.wnark.com/archives/22.html
本站所有原创文章采用署名-非商业性使用 4.0 国际 (CC BY-NC 4.0)。 您可以自由地转载和修改,但请注明引用文章来源和不可用于商业目的。声明:本博客完全禁止任何商业类网站转载,包括但不限于CSDN,51CTO,百度文库,360DOC,AcFun,哔哩哔哩等网站。