当前位置:千赢国际官网 > 千赢网页手机版登入 > 果断收藏9个Javascript代码高亮脚本,在WordPress中加

果断收藏9个Javascript代码高亮脚本,在WordPress中加

文章作者:千赢网页手机版登入 上传时间:2019-07-14

网上诸多写怎么在 WordPress 中整合谷歌自定义搜索的文章,但很少有提到如何整合v2版代码的,今天通过实测来给大家讲解一下,如何实现在 WordPress中整合谷歌自定义搜索的。

本文实例讲解了JavaScript实现简单的tab选项卡切换的示例代码,分享给大家供大家参考,具体内容如下

代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候。我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验。

获取谷歌自定义搜索代码 进入
谷歌各系列账号都是通用的,
所以如果你有gmail的话你就可以顺利进入这个自定义搜索的系统
一系列的注册、登陆你就进入到了 cse 主界面了,网速有时候会些许蛋疼的慢,所以大家要有耐心。
进入主界面点 新建搜索引擎
如下图所示填写内容:

效果图:

目前,有很多免费而且有用的代码高亮脚本。这些脚本大多是由Javascript语言编写,也有些使用其它语言(比如java、Phyton或Ruby)等写的。

图片 1

图片 2

下面来推荐最受欢迎、最实用的9个Javascript代码高亮脚本。

勾选同意协议,再点下一步,
按自己喜好选择样式,下面会直接出现演示哦亲。
再点下一步,就会出现代码了。
亲们,你们获取代码了吗?我获得的代码如下:

具体代码:

1.SyntaxHighlighter

<!-- Put the following javascript before the closing </head> tag. -->
<script>
 (function() {
 var cx = '006739494664361712883:_id_bvfkgey';
 var gcse = document.createElement('script');
 gcse.type = 'text/javascript';
 gcse.async = true;
 gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:')  
  '//www.google.com/cse/cse.js?cx='   cx;
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(gcse, s);
 })();
</script>
<gcse:searchbox></gcse:searchbox>

<!-- Place this tag where you want both of the search box and the search results to render -->
//下面这一对标签就是谷歌搜索框要显示的标签,
//即,你想把搜索框放哪就把这一对标签放哪。
<gcse:search></gcse:search>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table切换</title>
  <style type="text/css">
    *{
      padding: 
    }
    button{
      width: 95px;
    }
    .active {
      background-color: yellow;
    }
    #wrap{
      width:510px;
      overflow: hidden;
      margin:0 auto;
    }
    #inner{
      width:9999px;
      overflow: hidden;
      position: relative;
      left:0;
      transition: left 0.6s;
    }
    #inner a {
      float: left;
    }
    #inner img {
      display: block;
      width:510px;
    }
    #main{
      text-align: center;
    }

  </style>
</head>
<body>
 <div id="wrap">
  <div id="inner">
    <a href="###"><img src="img/1.jpg"></a>
    <a href="###"><img src="img/2.jpg"></a>
    <a href="###"><img src="img/3.jpg"></a>
    <a href="###"><img src="img/4.jpg"></a>
    <a href="###"><img src="img/5.jpg"></a>
  </div>
 </div>
 <div id="main">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
 </div>

 <script type="text/javascript">
   //获取节点
   var btnList = document.getElementsByTagName("button");
   var inner = document.getElementById("inner");
   //可见宽度
   var perWidth = inner.children[0].offsetWidth;

   //添加事件
     for(var i = 0; i < btnList.length; i  ) {
    btnList[i].index = i;
    btnList[i].onclick = function() {
      inner.style.left = -perWidth * this.index   "px";
      for(var j = 0; j < btnList.length; j  ) {
        btnList[j].className = "";
      }
      this.className = "active";
    }
  }
 </script>
</body>
</html>

我相信这是最普遍代码高亮代码。它支持多种不同的语言,而且如果你使用的语言不被默认支持,你也可以很简单的创建新“刷子”。

添加搜索页面 在你的WordPress中新建一个页面别名叫search
假设设置了固定连接,而且这个页面的访问地址是

用html编辑模式,在文章中添加你刚才获取的代码。
想知道是什么效果嘛?

希望本文所述对大家学习javascript程序设计有所帮助,熟练掌握选项卡切换操作。

图片 3

效果 你可以在下面直接搜索一下试试。

您可能感兴趣的文章:

  • 基于JavaScript实现Tab选项卡切换效果
  • 原生js实现tab选项卡切换
  • 很棒的js Tab选项卡切换效果
  • 基于javascript实现tab选项卡切换特效调试笔记
  • 4种JavaScript实现简单tab选项卡切换的方法
  • JS基于myFocus库实现各种功能的tab选项卡切换效果
  • 原生javascript实现Tab选项卡切换功能
  • 分步解析JavaScript实现tab选项卡自动切换功能
  • js实现tab选项卡切换功能

2.SHJS

系统整合 好了,你已经有了搜索页面了,现在我们还差整合到 WordPress 的搜索中去。
麻烦吗?当然不麻烦。
找到你主题搜索框样式定义的那个文件,
一般是searchform.php,
部分主题可能稍有不同。
有比较重要的两句,
一个是表单提交地址,action="XXX"
一个是表单参数名称name="s",
这里的代码大同小异,我相信你能找到。

SHJS是Syntax Highlighting in Javascript的简写。It 来自于GNU 源码高亮语言。并支持很多种编程语言。经测试SHJS 支持主流浏览器比如Firefox 2 , IE 6 , Opera 9.6 , Safari 3.2 及Chrome 1.0 .

<form action="http://pangbu.com" method="get">
<input id="searchtxt" class="textfield searchtip" type="text" name="s" size="24" value="">

图片 4

把action="XXX"
改成action="你刚才新建的那个搜索页面的url"
记着要带http,比如

3.beautyOfCode

action="http://pangbu.com/google-search-in-wordpress"

beautyOfCode 是一款jQuery 代码高亮插件。它使用SyntaxHighlighter 的脚本,并使其更好的兼容XHTML。

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:果断收藏9个Javascript代码高亮脚本,在WordPress中加

关键词: 千赢国际官网