ppt 代码语法突出显示

For websites like ours, code blocks and pre tags are necessities. Making these code blocks look good and function well is a big part of having your tutorial or example understood and easily digestable by your users.

对于像我们这样的网站，必须有code块和pre标签。 使这些代码块看起来不错且功能良好，这是使您的教程或示例易于理解并被用户轻松理解的很大一部分。

We've been asked quite a few times what tool we use for syntax highlighting here at Scotch. Here it is!

我们已经多次问过我们在Scotch使用什么工具来突出显示语法。 这里是！

Today we'll be looking at a great tool that some of you may have heard of: . Prism is a simple, lightweight, and easy to use syntax highlighter. It is easily customizable and has support for some plugins to extend its functionality.

今天，我们将看一个其中一些人可能听说过的出色工具： 。 Prism是一种简单，轻巧且易于使用的语法突出显示器。 它易于定制，并支持某些插件以扩展其功能。

Here's a quick example:

这是一个简单的例子：

For websites like ours, code blocks and pre tags are necessities. Making these code blocks look good and function well is a big part of having your tutorial or example understood and easily digestable by your users.
We've been asked quite a few times what tool we use for syntax highlighting here at Scotch. Here it is!
Today we'll be looking at a great tool that some of you may have heard of: PrismJS. Prism is a simple, lightweight, and easy to use syntax highlighter. It is easily customizable and has support for some plugins to extend its functionality.

主要特点 (Major Features)

• Lightweight Only 2kb minified and gzipped
  轻量级仅2kb缩小并压缩
• Good Practices To be semantically correct when writing code, you should be using the actual code tag. Some other highlighters just tell you to use pre. Prism makes you use both for good code. It also uses the HTML5 recommended way of defining a language using class="language-xxxx".
  良好实践为了在编写代码时在语义上正确，您应该使用实际的code标记。 其他一些荧光笔只是告诉您使用pre 。 Prism使您同时使用这两种代码。 它还使用HTML5建议的使用class="language-xxxx"定义语言的方式。
• Browser Support IE9+, Firefox, Chorme, Safari, and most mobile browsers
  浏览器支持 IE9 +，Firefox，Chorme，Safari和大多数移动浏览器
• Easy to Extend Prism's lets you extend the project.
  易于扩展 Prism的使您可以扩展项目。
• Smart Highlighting Has support for embedded, nested, and inline languages (like CSS inside of HTML)
  Smart Highlighting支持嵌入式，嵌套和内联语言（例如HTML内CSS）
• Line Highlights Exactly what you'd think. Also ranges of lines. ()
  突出显示的行正是您的想法。 也是行的范围。 （ ）
• Invisible Characters Show tabs and line breaks ()
  不可见字符显示选项卡和换行符（ ）
• Invisible Characters Show tabs and line breaks ()
  不可见字符显示选项卡和换行符（ ）
• Autolink URLs and Emails Also use Markdown links in comments ()
  自动链接URL和电子邮件在注释中也使用Markdown链接（ ）

谁使用它？ (Who Uses It?)

And don't forget yours truly! We use Prism right here on Scotch.

并不要真正忘记您的！ 我们在苏格兰这里就使用Prism。

入门 (Getting Started)

Implementing Prism into your site is an extremely easy process. Just link to the css and the js files and start highlighting!

在您的站点中实施Prism是一个非常简单的过程。 只需链接到css和js文件并开始突出显示即可！

Go get your download from the Prism website.

从Prism网站获取下载。

Once you have the files you have configured Prism to your needs, download and include the files into your project.

获得文件后，可以根据需要配置Prism，然后下载文件并将其包含在项目中。

Now we will include these files into our project.

现在，我们将这些文件包含到我们的项目中。

That's it. Now we are ready to use Prism.

而已。 现在我们准备使用棱镜。

用法 (Usage)

After you have included the necessary files, using Prism is very easy. All you have to do is add a pre and code tag to your site. Then add a class to your code tag and you have beautiful syntax highlighting.

包含必要的文件后，使用Prism非常容易。 您所要做的就是在网站上添加pre和code标签。 然后将一个类添加到您的code标签中，您将获得漂亮的语法突出显示。

    look at my html stuff here

Just like that you have beautiful syntax highlighting. Notice how we use language-markup to highlight HTML files. Here are the different classes to use for the different languages.

就像您拥有漂亮的语法突出显示一样。 注意我们如何使用language-markup突出显示HTML文件。 这是用于不同语言的不同类。

主题 (Themes)

Prism lets you configure your download with a few different themes.

Prism使您可以配置一些不同主题的下载。

默认 (Default)

黑暗 (Dark)

时髦的 (Funky)

冈田 (Okaida)

暮 (Twilight)

y (Coy)

外挂程式 (Plugins)

Prism lets you extend the features using plugins and it has some great ones ready to go.

Prism允许您使用插件扩展功能，并且有许多不错的功能可供使用。

行高亮 (Line Highlight)

a specific line in your code. Use the data-line attribute on your pre tag.

代码中的特定行。 在pre标签上使用data-line属性。

body                            { background:#F2F2F2; }h1, h2, h3, h4, h5, h6          { font-family:'Raleway'; }.container                      { width:90%; }

行号 (Line Numbers)

Add to your code blocks. Do this by adding a class to your pre tag.

将添加到您的代码块。 为此，可以在您的pre标签中添加一个类。

pre class="line-numbers"

pre class="line-numbers"

其他插件 (Other Plugins)

• Show the tabs and spaces
  显示标签和空格
• Automatically link URLs and emails
  自动链接URL和电子邮件
• Fetch an external file and highlight it
  提取外部文件并突出显示

最佳语法突出显示 (Syntax Highlighting at Its Best)

Using Prism is a quick and easy way to get beautiful syntax highlighting for your code. There are other alternatives out there, but we feel that Prism does the job well and is incredibly easy to use.

使用Prism是一种快速简便的方法，可为代码获得漂亮的语法突出显示。 还有其他选择，但是我们认为Prism做得很好，并且非常易于使用。

If you have any favorite tools for showing off code or anything similar, sound off in the comments.

如果您有喜欢的工具来展示代码或类似的东西，请在注释中取消提示。

翻译自:

ppt 代码语法突出显示