威尼斯人线上娱乐

【威尼斯人线上娱乐】向blog或网址中增添语法高亮呈现代码方法计算,炫丽的不用不要的canvas粒子运动插件库

4 5月 , 2019  

一:开篇

哈哈,谢谢标题党的光临~

威尼斯人线上娱乐,就算标题有点夸张的认为,但事实上,插件库确实是简单,高效,轻量级,炫目炫耀的嘞。废话不多说,先来看个标配例子吗:

威尼斯人线上娱乐 1

(codepen在线演示编辑:)

是啊,应该是酷炫绚烂的啊,不希罕的话能够向下看愈来愈多的例子哦~

开源造轮子:2个轻易,高效,轻量级,酷炫的并非不要的canvas粒子运动插件库,绚烂canvas

 

 

一:开篇

嘿嘿,感激标题党的光临~

虽说标题有点夸张的认为,但实在,插件库确实是精简,高效,轻量级,绚烂光彩夺目的嘞。废话不多说,先来看个标配例子吗:

威尼斯人线上娱乐 2

(codepen在线演示编辑:

是吗,应该是炫耀炫彩的吧,不欣赏的话能够向下看更多的例证哦~

 向blog或网址中增添语法高亮显示的代码方法总计

二:说说我(们)的理念:

style=”font-family: "Microsoft YaHei"”>厌倦市镇上杂乱,百花齐放,百鸟争鸣的繁荣景观,笔者心憔悴… 
style=”font-family: "Microsoft YaHei"”>像作者那种头脑轻松,4肢也简要的人就适合轻巧的API,简单人和物
(。・_・)/~~~
style=”font-family: "Microsoft YaHei"”>好吧,照旧说回代码吧,API设计希翼 style=”font-family: arial, helvetica, sans-serif”>  style=”font-family: arial, helvetica, sans-serif”>"The Write Less, Do More" style=”font-family: "Microsoft YaHei"”>和 style=”font-family: arial, helvetica, sans-serif”>
Keep it Simple and Stupid" style=”font-family: "Microsoft YaHei"”>的花样, class=”diff”
style=”font-family: "Microsoft YaHei"”>拒绝绕弯子API,崇尚轻便,简约!
就此你会跟小编同样,使用起这么些插件会深认为很爽,很轻松,嘎嘎嘎~
不信看看接下去的具备功用突显。

 

 

 

二:说说我(们)的理念:

厌倦市场上眼花缭乱,百花齐放,百鸟争鸣的繁荣景象,我心憔悴... 
像我这种头脑简单,四肢也简单的人就适合简单的API,简单人和物 (。・_・)/~~~
好吧,还是说回代码吧,API设计希翼 "The Write Less, Do More" 和 "Keep it Simple and Stupid" 的形式,拒绝绕弯子API,崇尚简洁,简约!
所以你会跟作者一样,使用起这个插件会感觉到很爽,很轻松,嘎嘎嘎~ 不信看看接下来的所有效果展示。

style=”font-family: "Microsoft YaHei"”>文章目录

  1. style=”font-family: "Microsoft YaHei"; font-size: 一五px”>预备知识
  2. style=”font-family: "Microsoft YaHei"; font-size: 15px”>目标
  3. style=”font-family: "Microsoft YaHei"; font-size: 壹五px”>第2类措施:嵌入
  4. style=”font-family: "Microsoft YaHei"; font-size: 15px”>第3类情势:外部引用
  5. style=”font-family: "Microsoft YaHei"; font-size: 一伍px”>第2类情势:忽略HTML和PHP

叁:全数功效展现

style=”font-family: "Microsoft YaHei"”>近年来插件库提供了三种特效:粒子冬日运动,波浪运动,雪花飘落特效。 
style=”font-family: "Microsoft YaHei"”>当然,配置差异的API参数值,或然能够拿走挺多不一致的特效呢!
style=”font-family: "Microsoft YaHei"”>下边已经演示过标配的粒子无序运动啦,上面演示前边三种。

 

 

一、波浪运动·标配

威尼斯人线上娱乐 3

(效果参考QQ电话,codepen在线演示编辑:)

js代码:

new Particleground.wave( '#demo', {
    num: 3,
    // 三条线依次的颜色
    lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
    // 三条线依次的宽度
    lineWidth: [.5, .7, .9],
    // 三条线依次的向左偏移值
    offsetLeft: [2, 1, 0],
    // 三条线都向上偏移容器高度的0.75倍
    offsetTop: .75,
    // 三条线依次的波峰高度
    crestHeight: [10, 14, 18],
    // 三条线都只有两个波峰(波纹)
    rippleNum: 2,
    speed: .1,
    // 隐藏填充,默认false
    fill: false,
    // 显示边框,即线条效果,默认true
    stroke: true
});

假诺您西班牙语能够的话,相信看属性名结合职能就大致知道配置是什么样看头啊,不然的话你能够看看官方网站对那多少个API的叙述,戳这里哈。

三:全体作用显示

目前插件库提供了三种特效:粒子无序运动,波浪运动,雪花飘落特效。 
当然,配置不同的API参数值,或许可以得到挺多不同的特效呢!
上面已经演示过标配的粒子无序运动啦,下面演示后面两种。

  近期在写代码时遇上3个主题素材,便是怎么让代码像在IDE或正规编写翻译器一样能够高亮展现在网页或博客中(如下图展现),上网查了不少资料,上边是本人对读书到的章程的归结计算。

 

1、波浪运动·标配

威尼斯人线上娱乐 4

(效果参考QQ电话,codepen在线演示编辑:

js代码:

new Particleground.wave( '#demo', {
    num: 3,
    // 三条线依次的颜色
    lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
    // 三条线依次的宽度
    lineWidth: [.5, .7, .9],
    // 三条线依次的向左偏移值
    offsetLeft: [2, 1, 0],
    // 三条线都向上偏移容器高度的0.75倍
    offsetTop: .75,
    // 三条线依次的波峰高度
    crestHeight: [10, 14, 18],
    // 三条线都只有两个波峰(波纹)
    rippleNum: 2,
    speed: .1,
    // 隐藏填充,默认false
    fill: false,
    // 显示边框,即线条效果,默认true
    stroke: true
});

若果您土耳其语能够的话,相信看属性名结合职能就大致知道配置是怎样看头啊,不然的话你能够看看官方网站对那多少个API的叙述,戳这里哈。

 

二、波浪运动·loading动画

 威尼斯人线上娱乐 5

(codepen在线演示编辑:)

【威尼斯人线上娱乐】向blog或网址中增添语法高亮呈现代码方法计算,炫丽的不用不要的canvas粒子运动插件库。本条js代码就不贴啦,须求自身写加载的速度,然后设置到功用上哈。

 

威尼斯人线上娱乐 6

 

2、波浪运动·loading动画

 威尼斯人线上娱乐 7

(codepen在线演示编辑:

以此js代码就不贴啦,须求团结写加载的快慢,然后设置到功效上哈。

 

三、雪花飘落特效

威尼斯人线上娱乐 8

(codepen在线演示编辑:)

极轻松的js代码:

new Particleground.snow('#demo');

 

  上边包车型大巴格局大多都是利用第2方javascript插件完结的,因此不要忧虑方法有多难,只要拿过来使用就能够了。在描述方法从前先介绍一下与之标准:

 

三、雪花飘飘特效

威尼斯人线上娱乐 9

(codepen在线演示编辑:

极轻巧的js代码:

new Particleground.snow('#demo');

 

四:解释标题

style=”font-family: "Microsoft YaHei"”>好啊,效果看完啦,未来解释一下标题的这么些宣传字眼,即便接近并不曾什么用威尼斯人线上娱乐 10

 

计划知识

简洁:
  • 就像是前边的粒子运动例子,只须要一行轻松的代码 new Particleground.particle('#demo') 就足以兑现啦。

  • 然后正是“洁”:这一个必要阅读源码咯,相信从源码中您会合到代码的轻易优雅的,现实请戳这里呀~

  • 本来,特效也是精简雅观的呐,对不起视觉的效应为何还要用代码去贯彻它呢威尼斯人线上娱乐 11

四:解释标题

好啦,效果看完啦,现在解释一下标题的那几个宣传字眼,虽然好像并没有什么用...
  • HTML和CSS的基本知识
高效:
  • 在我的力量基础之上,代码能优化的地方作者都想尽了点子去优化它(包罗品质的优化,代码的简化)。

  • 譬如说:this关键字的在另贰个函数内积存成变量参数使用,数次使用到的纵深属性或形式累积成变量使用,既达到收缩时可减掉体量,又达到缩小变量查找的耗费时间。

  • 譬如:粒子冬辰运动的连线作用管理,嵌套for循环,O(n²)的主题材料,笔者优化了二遍(git
    commit有记录咯),最终动用(学习借鉴)了《HTML五+JavaScript动画基础》那本书的一个妄图和优化措施,到达既不冗余代码或挤占内存,又提高了一倍的实行效能。现实可点击这里,源码第360行啊。

简洁:
  • 就如前边的粒子运动例子,只必要壹行轻便的代码 new Particleground.particle('#demo') 就足以兑现啦。

  • 接下来正是“洁”:这么些供给阅读源码咯,相信从源码中您见面到代码的简要优雅的,具体请戳这里呀~

  • 自然,特效也是精简美观的啊,对不起视觉的功效为啥还要用代码去落到实处它吗威尼斯人线上娱乐 12

目标

轻量级:
  • 鉴于后边提起的两点,轻量级自然就孕育而生啦。

  • 另一个便是特效之间都以以单身的插件格局利用的,不存在相互倚重的主题材料,只依据四个集体的功能文件,那样就足以达到规定的标准想加载什么就加载什么,按需加载的不臃肿体验啦,也能够偷懒直接运用含有全数特效的压缩包文件咯。

高效:
  • 在小编的本领基础之上,代码能优化的地方我都想尽了主意去优化它(包涵品质的优化,代码的简化)。

  • 譬如:this关键字的在另1个函数内积攒成变量参数使用,多次施用到的深度属性或方法储存成变量使用,既达到减弱时可减掉体量,又到达减弱变量查找的耗费时间。

  • 譬喻:粒子冬天运动的连线效率管理,嵌套for循环,O(n²)的主题材料,小编优化了一回(git
    commit有记录咯),最终动用(学习借鉴)了《HTML伍+JavaScript动画基础》这本书的二个想想和优化措施,达到既不冗余代码或占据内存,又升高了壹倍的试行效用。具体可点击这里,源码第二60行哦。

  • 在博客或网页中让嵌入代码高亮展现.
  • 在Wordpress中活动忽略HTML和PHP代码.

 

轻量级:
  • 由于前边谈到的两点,轻量级自然就孕育而生啦。

  • 另1个正是特效之间都以以单身的插件情势利用的,不设有相互重视的主题素材,只依附一个共用的职能文件,那样就足以达到想加载什么就加载什么,按需加载的不臃肿体验啦,也足以偷懒直接运用含有全数特效的压缩包文件咯。

  方法首要有两类,1种是引入第1方的JavaScript和高亮语法插件,让pre和code标签中的代码高亮呈现,另1种艺术是直接嵌入主流网址的语法代码。

五:最后

  • 一个美貌的官方网站及文书档案是三个特出的始发,插件库官方网站:particleground.duapp.com,
    先用着那些域名咯,等时机成熟了,再换回正式的 pjs.barrior.me 域名~

  • 贡献总是受应接的,无论它多么大或小!只要您与我的价值观,观念,志同道合的话,那就太希望你出席组织的胸怀啊,做1件自身喜好的事,做八个和好都喜欢自个儿的人。

  • 比方你欢欣这么些插件库并能补助到您的莫过于工作中,希望它能开发进取的更加好,提供越多风趣实用的特效,协理小编(们),烦请点个 Star 吧威尼斯人线上娱乐 13

 

 

 

五:最后

  • 二个卓绝的官方网站及文书档案是3个优良的开始,插件库官方网站:particleground.duapp.com,
    先用着这几个域名咯,等时机成熟了,再换回正式的 pjs.barrior.me 域名~

  • 孝敬总是受招待的,无论它多么大或小!只要你与小编的古板,思想,志同道合的话,那就太希望你投入组织的胸怀啦,做一件自个儿喜欢的事,做一个投机都欣赏本人的人。

  • 假如你喜爱那些插件库并能协助到您的骨子里职业中,希望它能发展的越来越好,提供越多有意思实用的特效,帮助自身(们),烦请点个 Star 吧威尼斯人线上娱乐 14

 

1:开篇 哈哈哈,感激标题党的光临~ 尽管标题…


  

先是类格局:嵌入

 

  嵌入格局是最方便急速的,多数网址都提供了代码导出的效应,它能够自行引进专门的工作网址的高亮代码呈现格局,赏心悦目大方。

 

GitHub
gist
 

采用方法:

<!DOCTYPE html>
<html>
<head>
    <title>github代码嵌入</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
    <style type="text/css">
       div{
           margin: 8px;
       }
    </style>
</head>
<body>
<h1>github代码嵌入</h1>
<div>
<script src="https://gist.github.com/dragonir/b3b43d791c259b597907069020f4b754.js"></script>
</div>
</body>
</html>

 

落成效益:

 威尼斯人线上娱乐 15

Codepen
pen

利用方法:

<!DOCTYPE html>
<html>
<head>
    <title>codepen代码嵌入</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
</head>
<body>
<h1>Codepen代码嵌入</h1>
<pre>
    <p data-height="265" data-theme-id="dark" data-slug-hash="MogbxY" data-default-tab="result" data-user="dragonir" data-embed-version="2" data-pen-title="MogbxY" class="codepen">See the Pen <a href="https://codepen.io/dragonir/pen/MogbxY/">MogbxY</a> by dragonir (<a href="https://codepen.io/dragonir">@dragonir</a>) on <a href="https://codepen.io">CodePen</a>.</p>
</pre>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</body>
</html>

   

落到实处效益:

 威尼斯人线上娱乐 16

威尼斯人线上娱乐 17

 


 

 

其次类格局:JavaScript高亮插件

 

  通过引进代码高亮展现插件,一样可以兑现博客以及任何网址放到代码的高亮彰显,以下是三种主流的措施。笔者只展现了核心的行使办法,想详细摸底使用情势和接口,能够点击链接到官方网址。

 

Highlight.js  

行使办法:

<!DOCTYPE html>
<html>
<head>
    <title>网页嵌入代码语法高亮</title>
    <meta charset="utf-8">

    <!-- 
        <link rel="stylesheet" href="/path/to/styles/default.css"> 
        <script src="/path/to/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    -->

    <link rel="stylesheet" type="text/css" href="./highlight/styles/railscasts.css">
    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
    <script src="./highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Highlight.js</h1>
<pre>
    <code class="javascript">
        function selectionSort(arr){
            var minIndex, temp, len = arr.length;
            for(var i=0; i < len; i++){
                minIndex = i;
                for(var j=i+1; j < len; j++){
                    if(arr[j] < arr[minIndex]){
                        minIndex = j;
                    }
                }
                temp = arr[i];
                arr[i] = arr[minIndex];
                arr[minIndex] = temp;
            }
            return arr;
        }
        var num = new Array;
        num = [1,5,2,8,4,9,3,0,4];
        console.log(selectionSort(num));
    </code>
</pre>


</body>
</html>

 

得以完结效益:

 威尼斯人线上娱乐 18

 

Prism.js

应用形式:

<!DOCTYPE html>
<html>
<head>
    <title>prism.js</title>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
    <link rel="stylesheet" type="text/css" href="./prism/prism.css">
    <script src="./prism/prism.js"></script>
</head>
<body>
<h1>prism.js</h1>
<pre>
    <code class="language-javascript">
        function selectionSort(arr){
            var minIndex, temp, len = arr.length;
            for(var i=0; i < len; i++){
                minIndex = i;
                for(var j=i+1; j < len; j++){
                    if(arr[j] < arr[minIndex]){
                        minIndex = j;
                    }
                }
                temp = arr[i];
                arr[i] = arr[minIndex];
                arr[minIndex] = temp;
            }
            return arr;
        }
        var num = new Array;
        num = [1,5,2,8,4,9,3,0,4];
        console.log(selectionSort(num));
    </code>
</pre>


</body>
</html>

  

兑现效益:

 威尼斯人线上娱乐 19

 

Google
Prettify
 

运用格局:

<!DOCTYPE html>
<html>
<head>
    <title>prettify.js</title>
    <meta charset="utf-8">

    <!-- 
    Include the script tag below in your document:
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    See Getting Started to configure that URL with options you need.
    Look at the skin gallery and pick styles that suit you. 
    -->

    <!-- 
    Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty-printed. 
    -->

    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
    <script src="./prettify/loader/run_prettify.js"></script>
</head>
<body>
<h1>prettify.js</h1>
<pre>
    <code class="prettyprint">
        function selectionSort(arr){
            var minIndex, temp, len = arr.length;
            for(var i=0; i < len; i++){
                minIndex = i;
                for(var j=i+1; j < len; j++){
                    if(arr[j] < arr[minIndex]){
                        minIndex = j;
                    }
                }
                temp = arr[i];
                arr[i] = arr[minIndex];
                arr[minIndex] = temp;
            }
            return arr;
        }
        var num = new Array;
        num = [1,5,2,8,4,9,3,0,4];
        console.log(selectionSort(num));
    </code>
</pre>
</body>
</html>

 

金玉锦绣效益:

 威尼斯人线上娱乐 20

 


 

其3类格局:忽略HTML和PHP

 

  为了展现HTML和PHP代码,浏览器必供给将显示的代码自动忽略,你能够运用在线转变工具 Free
Online HTML Escape
Tool
来转变你要求出示的HTML代码。假若你是用的博客是wordPress的博客,WordPress
plugin
 可以兑现此意义,但是它无法和Prism.js同时使用。

 


 

总结

  未来就在您的博客或网址中放置雅观的代码吧,假如你想询问更多卓有效能的WordPress的作用,推荐访问this
is the resource for
you.

 

style=”font-family: "Microsoft YaHei"; font-size: 一5px”>转发请标明出处:,小编:Dragonir
,应接转发。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图