精华内容
下载资源
问答
我要提问
  • 代码语法 使用 Prism.js 实现漂亮的代码语法高亮 万次阅读 热门讨论
    2019-02-27 16:01:19

    1. 简介
      Prism 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建。

    2. 为什么选择 Prism.js ？

      • 极致易用
        引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！

      • 天生伶俐
        语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。

      • 轻如鸿毛
        代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。

      • 快如闪电
        如果可能，支持通过 Web Workers 实现并行。

      • 轻松扩展
        定义新语言或扩展现有语法，或者新增功能都非常简单。

      • 丰富样式
        所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。

    3. 下载地址

      • 官网地址
        http://prismjs.com/download.html
      • BootCDN 地址
        https://www.bootcdn.cn/prism/1.15.0/

    4. 使用教程

    line-numbers便是显示行号，language-markup就是语言。

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Prism 代码语法高亮</title>
  <link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/prism/1.15.0/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet">
  <!-- <link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism-okaidia.css" rel="stylesheet"> -->
  <style>
    #box {
      width: 60%;
      margin-left: 35px;
    }
  </style>
</head>

<body>
  <div id="box">
    <h3>css显示:</h3>
    <pre class="line-numbers"><code class="language-css">p { color: red }
</code></pre>
    <h3>js显示:</h3>
    <pre class="line-numbers"><code class="language-js">require("lib/ace"); ##引入
editor.setTheme("ace/theme/solarized_dark");##设置模theme-solarized_dark.js模板文件
editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
editor.setValue("the new text here");##设置内容
editor.getValue(); ##取值</code></pre>
    <h3>java显示:</h3>
    <pre class="line-numbers"><code class="language-java">String res=new ShowApiRequest("http://route.showapi.com/213-4","my_appI"my_appSecret")
  .addTextPara("topid","5")
  .post();
System.out.println(res);
</code></pre>
    <h3>html显示:</h3>
    <pre class="line-numbers"><code id="code-1" class="language-html"></code></pre>
    <pre class="line-numbers"><code id="code-2" class="language-html">&lt;p>data-foo&lt;/p&gt;
&lt;p>数据绑定&lt;/p></code></pre>
  </div>
  <script src="https://cdn.bootcss.com/prism/1.15.0/prism.js"></script>
  <script src="https://cdn.bootcss.com/prism/1.15.0/components/prism-java.js"></script>
  <script src="https://cdn.bootcss.com/prism/1.15.0/plugins/line-numbers/prism-line-numbers.js"></script>
  <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  <script>
    var text =
      '<link href="https://cdn.bootcss.com/prism/1.15.0/themes/prism.css" rel="stylesheet">\n' + '<p>js操作html数据绑定</p>';
    var text = $('#code-1').text(text)
    console.log($('#code-1').text());
  </script>
</body>

</html>
    1. 支持的语言
    Markup - markup
CSS - css
C-like - clike
JavaScript - javascript
ABAP - abap
ActionScript - actionscript
Apache Configuration - apacheconf
APL - apl
AppleScript - applescript
AsciiDoc - asciidoc
ASP.NET (C#) - aspnet
AutoIt - autoit
AutoHotkey - autohotkey
Bash - bash
BASIC - basic
Batch - batch
Bison - bison
Brainfuck - brainfuck
Bro - bro
C - c
C# - csharp
C++ - cpp
CoffeeScript - coffeescript
Crystal - crystal
CSS Extras - css-extras
D - d
Dart - dart
Diff - diff
Docker - docker
Eiffel - eiffel
Elixir - elixir
Erlang - erlang
F# - fsharp
Fortran - fortran
Gherkin - gherkin
Git - git
GLSL - glsl
Go - go
Groovy - groovy
Haml - haml
Handlebars - handlebars
Haskell - haskell
Haxe - haxe
HTTP - http
Icon - icon
Inform 7 - inform7
Ini - ini
J - j
Jade - jade
Java - java
JSON - json
Julia - julia
Keyman - keyman
Kotlin - kotlin
LaTeX - latex
Less - less
LOLCODE - lolcode
Lua - lua
Makefile - makefile
Markdown - markdown
MATLAB - matlab
MEL - mel
Mizar - mizar
Monkey - monkey
NASM - nasm
nginx - nginx
Nim - nim
Nix - nix
NSIS - nsis
Objective-C - objectivec
OCaml - ocaml
Oz - oz
PARI/GP - parigp
Parser - parser
Pascal - pascal
Perl - perl
PHP - php
PHP Extras - php-extras
PowerShell - powershell
Processing - processing
Prolog - prolog
Protocol Buffers - protobuf
Puppet - puppet
Pure - pure
Python - python
Q - q
Qore - qore
R - r
React JSX - jsx
reST (reStructuredText) - rest
Rip - rip
Roboconf - roboconf
Ruby - ruby
Rust - rust
SAS - sas
Sass (Sass) - sass
Sass (Scss) - scss
Scala - scala
Scheme - scheme
Smalltalk - smalltalk
Smarty - smarty
SQL - sql
Stylus - stylus
Swift - swift
Tcl - tcl
Textile - textile
Twig - twig
TypeScript - typescript
Verilog - verilog
VHDL - vhdl
vim - vim
Wiki markup - wiki
YAML - yaml
    1. 插件-plugins

      插件是扩展Prism功能的附加脚本（和CSS代码）。

    • 线条突出显示 - Line Highlight
    • 行号 - Line Numbers
    • 显示隐形 - Show Invisibles
    • Autolinker - Autolinker
    • Web平台文档 - WebPlatform Docs
    • 自定义类 - Custom Class
    • 文件突出显示 - File Highlight
    • 显示语言 - Show Language
    • JSONP亮点 - JSONP Highlight
    • 突出显示关键字 - Highlight Keywords
    • 删除初始换行符 - Remove initial line feed
    • 预览器 - Previewers
    • 自动加载磁带机 - Autoloader
    • 保持标记 - Keep Markup
    • 命令行 - Command Line
    • 非转义标记 - Unescaped Markup
    • 规范化空白 - Normalize Whitespace
    • 数据URI突出显示 - Data-URI Highlight
    • 工具栏 - Toolbar
    • 复制到剪贴板按钮 - Copy to Clipboard Button
    Prism
    更多相关内容

  • 解决 Evernote 印象笔记中代码语法高亮

     千次阅读 2019-07-24 12:12:45
    如果直接将代码从IDEA或者eclipse复制到Evernote 中，一般是不会有代码高亮部分的，复制到代码块中也是没有的，因此，我们可以通过notepad++来解决这个问题 1、Evernote +notepad++ 2、通过notepad++打开代码的...

    如果直接将代码从IDEA或者eclipse复制到Evernote 中，一般是不会有代码高亮部分的，复制到代码块中也是没有的，因此，我们可以通过notepad++来解决这个问题

    1、Evernote + notepad++

    2、通过notepad++打开代码的源文件（注意：不要从IDE中直接copy，而是用notepad++打开源文件）

    3、代开源文件后，在notepad++中，

             右键 -> Plugin Commands ->Copy Text with Syntax Highlighting

    4、在Evernote中直接右键+粘贴，在设置代码大小即可，如果要设置代码行数，则通过选中代码，点击下面的图标

           

    则可以设置为下面的代码样式

        

    设置完成~

    收起
    展开全文

  • 编译原理LL1语法分析器（C++版）源代码

     2019-01-05 13:38:21
    自己实现的编译原理的LL1语法分析器，是自己的实验作业，用Vs2017实现，可以直接运行，代码注释丰富，希望与大家交流学习！欢迎大家下载！
    收起

  • 词法分析器和语法分析器java实现代码---

     2019-04-28 21:22:49
    语法分析器和词法分析器的java实现代码，以证明可以，望各位下载。
    收起

  • 编译原理语法制导翻译及中间代码生成

     2019-03-18 21:00:15
    提供语法制导翻译及中间代码生成，举例说明语法制导原理和概念，提供一些例题
    收起

  • CSDN博客代码块语法高亮

     千次阅读 2018-09-22 15:43:10
    CSDN编辑器支持代码的高亮，但是必须明确指出语法，很简单； 举个例子： 1、插入代码块（ctr+shift +k） 2、在 ‘’``’'这个符号后致命语法，如下图所示 实际结果如下所示： print('Hello World\n') ...

    CSDN编辑器支持代码的高亮，但是必须明确指出语法，很简单；
    举个例子：
    1、插入代码块（ctr+shift +k）
    2、在 ‘’``’'这个符号后注明语法，下面的是使用python，注明语法为python就可以了!
    此处标注的语法是python

    	print('Hello World\n')
    收起
    展开全文

  • VS Code实现python代码语法检查、格式规范化、自动换行字数限制

     万次阅读 2019-06-29 13:23:51
    1 代码语法检查        语法检查工具主要使用的是flake8，安装方式在上一篇已经讲到过flake8安装，flake8不仅可以实现代码的自动补全，还可以进行语法检查，写代码的时候编辑器就会提示哪里出错...

    1 代码语法检查

           语法检查工具主要使用的是flake8，安装方式在上一篇已经讲到过flake8安装，flake8不仅可以实现代码的自动补全，还可以进行语法检查，写代码的时候编辑器就会提示哪里出错。
           但是，请注意这个但是，一直困扰着很多强迫症患者，就是如果使用自带的代码格式化规范工具，稍微有点长的代码就会自动换行，一点点长也会，看着很不爽。在网上看了很多答案都不靠谱，比如：

    1. 方法一：在settings.json文件添加
        "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "aligned-multiple"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    1. 方法二：在settings.json文件添加
    "python.linting.flake8Args": ["--max-line-length=248"]

    这两种方法都失败，由此引入下一段内容

    2 代码格式化规范与自动换行字数限制

    使用的工具主要是autopep8，安装方式和flake8一样。
    使用方法：打开设置（settings.json），输入如下代码

        "python.formatting.provider": "autopep8",
    "python.formatting.autopep8Args": [
    "--max-line-length=200",
    "--aggressive",
    "--ignore",
    "E402",
  ],

    如图所示：个人觉得可以在用户选项中写入的，但试了完全不起作用，所以在CODEPYTHON文件夹中写入
    在这里插入图片描述
    设置换行字数限制的代码就是"–max-line-length=200"，这样就不会出现烦人的稍微有点长的代码就会自动换行的情况了。
    然而，flake8又出来作怪了，稍微有点长的代码行会出现：line too long (82 > 79 characters)flake8(E501)，这种红波浪线提示。
    如果依然无法忍受，请看下面，此处有两种方式解决：
    第一种方式：就是在settings.json用户文件添加如下代码

    	"python.linting.flake8Args": [
		"--max-line-length=200"
	]

    第二种方式：（推荐）直接设置忽略E501警告，在settings.json用户文件添加如下代码

        "python.linting.flake8Args": [
    	"--ignore=E501", // 忽略一行字数限制
    	
      // "--max-line-length=200", // 在autopep8Args基础上设置一行字数
      // "--ignore=E501,F405", // 同时忽略一行字数限制，不确定引用哪个模块限制
    ],

    大功告成！！！

    收起
    展开全文

  • Markdown代码块语法高亮显示

     千次阅读 2020-04-13 19:27:31
    c-sharp , csharp shBrushCSharp.js CSS css shBrushCss.js Delphi delphi , pascal , pas shBrushDelphi.js diff&patch diff patch shBrushDiff.js 用代码版本库时,遇到代码冲突,其语法就是这个. Erlang erl , ...
    收起

  • VSCode + ESLint + Prettier 代码语法检查和格式化

     千次阅读 2020-01-21 14:02:07
    前言 在我们做项目的时候，特别是团队协作时，每个人的编码风格和编码方式都不一样，这样在同一个...这类介绍一下如何在 vscode 中通过 eslint + prettier 来对代码进行语法检查和风格统一。目前我们的项目主要是...
    收起

  • c语言语法分析器源代码

     2009-05-07 20:17:29
    编译原理专题实验c语言语法分析器源代码，用c＋＋做的。
    收起

  • 伪代码（Pseudocode）的语法规则

     万次阅读 多人点赞 2019-09-27 15:40:21
    伪代码（Pseudocode）是一种算法描述语言。使用伪代码的目的是为了使被描述的算法可以容易地以...　例如，类Pascal语言的伪代码的语法规则是： 在伪代码中，每一条指令占一行（else if，例外）。指令后不跟任何符号...
    收起

  • 伪代码——语法书写~规则

     千次阅读 2020-04-28 10:45:52
    语法规则 在伪代码中，每一条指令占一行(else if，例外) 。指令后不跟任何符号(Pascal和C中语句要以分号结尾)。 算法名称 两种表示算法的伪代码：过程（Procedure），函数（Function） 两者的区别：过程是执行一...
    收起
    算法

  • sublime text 3文件代码语法怎样设置高亮显示

     千次阅读 2020-03-28 15:40:04
    红框这里选择你的代码样式
    收起

  • QtCreator4.8.0设置C++代码语法检查警告级别

     千次阅读 2019-02-27 10:19:06
    最近更新到Qt5.12.0以后，使用QtCreator4.8.0版本的IDE编写C++代码时，总会出现各种语法警告，很是烦人，虽然自己的代码确实写的不咋地，但是要想没有任何警告有时候是挺难的，警告严重敲代码影响心情。在这里，介绍...
    收起

  • Markdown编辑器语法之代码高亮、标记和文字颜色

     万次阅读 2019-06-07 21:54:28
    Markdown 通过简单标记语法，使普通文本内容具有一定格式。但它本身不支持修改字体、字号与颜色等功能的。CSDN-markdown 编辑器是其衍生版本... 代码语法高亮 书写格式为： language_key if (condition) { retur...
    收起
    HTML

  • Prismjs 代码语法高亮在 vue 中的应用

     千次阅读 2019-02-16 15:25:46
    Prismjs是前端界面显示代码语法高亮的npm包它实现了代码在前端页面显示时就像在编辑器中时一样的样式要在vue框架中使用这样的装逼神器首先要做的自然是安装他了npm i --save Prismjs npm i --save babel-plugin-...
    收起

  • JavaScript语法和数据类型（源代码）

     2022-05-31 20:39:16
    JavaScript语法和数据类型（源代码）JavaScript语法和数据类型（源代码）JavaScript语法和数据类型（源代码）JavaScript语法和数据类型（源代码）JavaScript语法和数据类型（源代码）JavaScript语法和数据类型（源...
    收起

  • Evernoote 印象笔记中代码语法高亮

     万次阅读 2014-08-26 00:04:01
    印象笔记官方貌似还不支持像博客中的代码语法高亮功能。不过通过剪藏网页可以保留网页中的各种格式。  下面介绍一种不通过剪藏网页就实现编辑代码的方法。  工具：  1. Evernote (废话。。。)  2. ...
    收起
    印象笔记

  • 使用prismjs实现Jekyll代码语法高亮并显示行号

     千次阅读 2017-12-20 15:15:33
    在 jekyll 上设置代码语法高亮有好几种选择，然而要使代码能显示行号似乎有些困难，至少在百度上是很难找到满意的答案的。其实，jekyll 本身是可以开启行号的，但是这样是不利于网页的美化的。由于我们无法控制 ...
    收起
    jekyll

  • 语法分析器（C语言源代码）（附实验报告）

     2017-04-17 16:32:28
    通过C语言编写一个语法分析器采用递归下降分析法编写语法分析程序及LL（1）语法分析法编写语法分析程序。附上实验报告。
    收起

  • sublime text 3 中的php代码语法检测

     千次阅读 2018-06-29 16:24:40
    sublime text 3 中存在一个php 代码语法检测的插件，如果在sublime中编写php代码出现了语法错误，可以在左侧出现红色的提示标志；如图所示：那么这样的效果在sublime编辑器中是怎样做到的呢？首先我们需要安装两个...
    收起

  • 语法树

     千次阅读 2021-05-12 01:18:45
    何为语法树 什么是语法树？ 你是否曾想过，这个世界存在这么多语言的意义。 假如现在你面前有一个物体，它是一个不规则的圆体，整个身体通红，头部还有一根细长稍微弯曲偏右呈棕色的圆柱体。 在中文我们称之为...
    收起
    java

  • 语法分析器源代码

     2012-11-27 11:13:46
    语法分析器源代码
    收起

  • 简单实用的wordpress文章插入代码语法高亮插件

     千次阅读 2015-05-19 17:49:15
    如何在文章中插入代码这本来是件简单的事，但由于wordpress是用PHP代码写的，所以在wordpress的文章中插入ＰＨＰ代码就会有些部份会被屏蔽掉，针对这种问题本站特意来推荐一个简洁干净的代码显示插件CodeColorer，这...
    收起
    wordpress

  • 怎样在WPS上实现代码语法高亮(转）

     千次阅读 2013-12-25 10:54:36
    wps语法高亮
    收起
    wps

  • Haroopad Markdown 编辑器代码语法高亮支持

     万次阅读 2016-02-03 13:32:47
    代码语法高亮 支持的语言和缩写标记 参考代码语法高亮书写格式为：` ` ` language_key if (condition){ return true } ` ` `在 ` ` ` (三个反引号）之间的是代码，其中language_key的值，请参考 支持的语言和...
    收起
    markdown haroopad

  • 【Tools】markdown基本语法和代码高亮方法

     千次阅读 2018-06-10 14:45:14
    Date: 2018.6.9 1、参考 ... ...2、markdown基本语法 ...github上的README.md文件就是使用的Markdown语言...在使用Markdown过程中发现，不同语言代码之间是无法区分的，不能指定不同语言的代码高亮不同，希望可以改进！
    收起
    markdown

  • 编译原理 词法分析，语法分析，中间代码生成 源代码

     热门讨论 2013-01-11 13:57:37
    编译原理 词法分析，语法分析，中间代码生成 源代码 重庆理工大学编译原理实验。
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,788,349
精华内容 715,339
热门标签
关键字：

代码语法