css Blogger.com：如何在博客文章中嵌入格式化的代码片段？[duplicate]

rxztt3cl 于 2022-12-27 发布在其他

关注(0)|答案(6)|浏览(147)

- 此问题在此处已有答案**：

Formatting code snippets for blogging on Blogger [closed]（16个答案）
7个月前关闭。
I have a blog on blogger.com and would like to format my code example in my post.
我需要使用什么来设置博客文章中代码片段的格式？

css

来源：https://stackoverflow.com/questions/54698800/blogger-com-how-to-embed-formatted-code-snippet-in-a-blog-post

6条答案

按热度按时间

iklwldmw1#

这里有一个Blogger.com博客，上面有一个关于如何做Syntax Highlighting with Blogger Engine的教程。要么尝试使用Hilite将代码转换为可嵌入的代码，要么使用Gist--这将是最简单的解决方案。
如果有任何机会，它是过时的解决方案，为您的需求，然后阅读这：设置代码段格式以便在Blogger上撰写博客
在模板中标记的正上方添加语法高亮显示器：

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

然后添加代码片段。

赞(0）回复(0）举报 2022-12-27

r1zk6ea12#

语法突出显示取决于您试图突出显示的编程语言代码。不同的语言必须以不同的方式突出显示。
最好使用第三方库来为您处理这些问题。
以下是如何在Blogger中执行此操作的教程：How To Format Code Snippets In Blogger Posts

赞(0）回复(0）举报 2022-12-27

q43xntqr3#

您可以使用高亮JS。
转到主题和编辑html，地方下面的代码。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark-reasonable.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js'></script>
<script>hljs.initHighlightingOnLoad();</script>

在<pre><code></code></pre>下编写代码
或者你可以使用gist.github.com来创建gist并将嵌入式代码复制到你的博客中。

赞(0）回复(0）举报 2022-12-27

ctehm74n4#

由@cdev给出的答案是正确的，但过时了。六月，2021这是为我工作的代码是：

<link href='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/styles/default.min.css' rel='stylesheet'/>
<script src='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/highlight.min.js'/>
<script src='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/languages/dart.min.js'/>
<script>
    hljs.configure({cssSelector: &quot;code&quot;});
    hljs.highlightAll();
</script>

前面的代码必须添加到<head>标记之前。
默认情况下，突出显示的代码必须写在<pre><code></code></pre>下，如果您还希望能够突出显示<code></code>下的代码，则必须添加hljs.configure({cssSelector: "code"});行
<script src='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/languages/dart.min.js'/>这一行将突出显示dart代码。如果您使用的语言在默认情况下没有突出显示，您可能需要添加类似的行。检查supported languages
您可以在my blog中看到本文