evalscripts.push(id); var scriptNode = document.createElement("script"); scriptNode.type = "text/javascript...pastM + "分钟前"; } else { timeStr = "刚刚"; } } } return timeStr; } 全角转换为半角函数...(i) - 12288 + 32); } else { result += str.charAt(i); } } return result; } 半角转换为全角函数...str.charCodeAt(i) + 12288 - 32); } else { result += str.charAt(i); } } return result; } 金额大写转换函数...& 63) << 6) | (c3 & 63) ); i += 3; } } return tmp_arr.join(""); } 以下是Puxiao投稿推荐的几个函数
return Math.max(...arr); } 查找数组最小 function arrayMin(arr) { return Math.min(...arr); } 返回已 size 为长度的数组分割的原数组...arr.slice(0, arr.length - n) : []; } 截取第一个符合条件的元素及其以后的元素 function dropElements(arr, fn) { while (arr.length...return letter.toUpperCase(); }); } /** * 检查浏览器是否支持某个css属性值(es6版) * @param {String} key - 检查的属性值所属的...,且最后也要应用上没有前缀的情况,看最后浏览器起效的何种情况 // 这就是最好在prefix里的最后一个元素是'' prefixValue.forEach((item) => { eleStyle...[key] = item; }); return eleStyle[key]; } /** * 检查浏览器是否支持某个css属性值 * @param {String} key - 检查的属性值所属的
首页 专栏 javascript 文章详情 3 这些 JavaScript函数让你的工作更加 So Easy! ?...上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。...在本文中,分享一些我几乎在每个项目中都会用到的一些函数。 randomNumber() ---- 获取指定区间的随机数。 ** * 在最小值和最大值之间生成随机整数。...不过,这个函数不能与new Date()、NaN、undefined、function、Number、Infinity等数据类型一起工作。...你想深度克隆上述数据类型,可以使用 lodash 中的 cloneDeep() 函数。
在JavaScript中,函数表达式是一种将函数赋值给变量的方法。函数表达式可以出现在代码的任何位置,而不仅仅是函数声明可以出现的位置。...这意味着myFunction变量现在持有了一个函数作为其值。 函数表达式的工作方式如下: 1:变量声明:使用var、let或const关键字声明一个变量,例如myFunction。...函数表达式的特点: 1:匿名函数:函数表达式可以是匿名函数,即没有函数名。在这种情况下,函数只能通过变量名来调用。...这样的函数在函数内部和外部都可以通过函数名来调用自身。...函数声明会被提升到作用域的顶部,而函数表达式不会被提升。因此,在使用函数表达式之前,需要确保该表达式已经被赋值。此外,函数表达式还可以根据需要在运行时动态创建函数,具有更大的灵活性。
InstantClick 是一个 JavaScript 库,可以显着加快您的网站速度,工作原理是预加载你可能点击的链接来欺骗。...举个简单的例子比如您想点击“膨胀的面包”下一页,在鼠标放到下一页按钮按下点击之前 InstantClick 已经帮助您把下一页的内容提前加载好了,可以明显的感受到速度提升。...针对部分页面CSS无法预加载的问题 instantclick 提供了黑名单功能,可以将指定的 URL 链接设置为黑名单,这个链接将不再使用 instantclick 预加载。...解决 highlight.js 冲突问题 使用 highlight.js 库进行代码高亮的页面,highlight.js 默认使用下面这个函数来进行代码渲染: hljs.initHighlightingOnLoad...(); 使用 instantclick 发现存在冲突,预加载的页面发现代码无法进行高亮渲染,需要将上面的渲染函数更改为: $('pre code').each(function(i,
javascript库, 并只有38k,包含了大多数开发者需要的地图特点。...8: underscore.js star:25.3k https://github.com/jashkenas/underscore Underscore是一个JavaScript实用库,提供了一整套函数式编程的实用功能...:专门为函数式编程风格而设计,更容易创建函数式 pipeline、且从不改变用户已有数据。...Highlight.js 是一个用于语法高亮显示的库,可在浏览器和服务器上使用。...它几乎可以与任何Markdown一起使用,并具有自动语言检测功能。 ?
javascript库, 并只有38k,包含了大多数开发者需要的地图特点。...8: underscore.js star:25.3k https://github.com/jashkenas/underscore Underscore是一个JavaScript实用库,提供了一整套函数式编程的实用功能...:专门为函数式编程风格而设计,更容易创建函数式 pipeline、且从不改变用户已有数据。...Highlight.js 是一个用于语法高亮显示的库,可在浏览器和服务器上使用。...它几乎可以与任何Markdown一起使用,并具有自动语言检测功能。
作者:Simon Holdorf 译者:前端小智 来源:medium 虽然JavaScript本身很棒,但有它对应生态圈也很重要,这些圈会让 JS 更好。...主要功能是: 不变性和无副作用的函数 几乎所有的函数都是自动柯里化的 参数设置为Ramda函数,便于进行柯里化 2....它很轻,很完善,在GitHub上有43000多颗星,它可以在浏览器和Node.js中工作。...它几乎可以与任何Markdown一起使用,并具有自动语言检测功能。 Highlight.js将在 标记之间搜索编程代码,尝试自动检测语言并突出显示语法。...它使用Web标准,并利用现代浏览器的强大功能,使数据栩栩如生。 ? 6. Three.js github: https://github.com/mrdoob/thr...
动态加载CSS.gif 前言 最近有在使用 highlight.js 做代码的高亮展示,主要是展示对 SQL 语言的处理。看了看 highlight.js 的提供的相关代码 !...hljs from 'highlight.js/lib/highlight' import * as javascript from 'highlight.js/lib/languages/javascript...' hljs.registerLanguage('javascript', javascript) 其他的部分和上文相同,区别在于,没有从整个 highlight 中加载,而是引用了部分文件以及需要注册的...javascript 语言部分,默认是加载包含所有语言版本的 hljs ,看看这下的打包大小 highlight-2.png 我们可以看到,使用按需加载将近节省了600KB的空间,而使用按需加载的引入方式是...比如require('highlight.js/styles/' + nextProps.css) require是关键字,接下来 webpack 会对 require 这个函数中的入参进行分析,它会发现入参有两个部分构成
我喜欢这个库的地方在于它为每个函数提供了许多详细的示例,使您可以轻松设置和构建。 Carousel 适合我的 web 项目,具有自动播放功能、视频可用性、可自定义的运动效果等。...14、Highlight.js 地址:https://highlightjs.org// Highlight.js 是一个用 JavaScript 构建的开源库,可帮助您突出显示网站上的代码,并且可以在浏览器和服务器上运行...27、Underscore.js 地址:http://underscorejs.org/ Underscore.js 是一个 JavaScript 库,可为您提供有用的函数来解决常见的编程问题。...它响应式地显示在许多不同的设备屏幕上,并且易于与当今流行的 JS 框架(如 React、Angular、Aurelia、Vue 和 Svelte)一起使用。...34、Dinero.js 地址:https://dinerojs.com/ Dinero.js 是一个 JavaScript 库,它提供了许多功能来帮助您工作和解决问题。与货币相关的主题在网站上。
所以,现在推荐一个库:highlight.js (highlightjs.org) 一直维护到现在, 并且还在不断迭代更新的代码高亮库 highlight.js 官网地址:https://highlightjs.org...Diff Go HTML,XML JSON Java JavaScript Kotlin Less Lua Makefile Markdown Objective-C PHP PHP Template...demo 样式 https://highlightjs.org/static/demo/ 我们可以通过上面的链接,访问highlight.js 的各种Themes风格的效果。...document.querySelectorAll('div.code').forEach(el => { // then highlight each hljs.highlightElement(el); }); 还可以和Vue 一起使用...,可以通过lssues进行反馈 CDN加速 Highlight.js 的几种通用的版本,在cdnjs 和jsdeliver之中都有加速库。
安装 Python Markdown 将 Markdown 格式的文本解析成标准的 HTML 文档是一个复杂的工程,好在已有好心人帮我们完成了这些工作,直接拿来使用即可。...,即代码无法换行,请检查代码块的语法是否书写有误。...safe 是 django 模板系统中的过滤器(Filter),可以简单地把它看成是一种函数,其作用是作用于模板变量,将模板变量的值变为经过滤器处理过后的值。...,而是由 safe 函数处理后返回的值。...代码高亮 程序员写博客免不了要插入一些代码,Markdown 的语法使我们容易地书写代码块,但是目前来说,显示的代码块里的代码没有任何颜色,很不美观,也难以阅读,要是能够像代码编辑器里一样让代码高亮就好了
ckeditor_uploader.urls')), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # 没有这一句无法显示上传的图片...csrf校验免除,并限制了只有登录用户才可以上传图片,ckeditor默认应用的是django-admin的用户校验方法,django-admin的校验方法不允许跨域请求,我们需要使上传图片的类试图函数继承自...directory or download your own copy from the highlight.js download page....通过CSS的方式解决。打开选择的highlight.js样式表zenburn.css,修改如下, .hljs { ... white-space: pre-wrap !...九.前端页面显示的字体/大小和后端设置的不一样? 前端页面CSS造成的,如何解决? 十.使用七牛云存储,缩略图无法生成?
components: { 'MyMarkdown': () => import('xxx.md') } } 当然,通常情况下,我们会与 vue-router 一起使用...看起来还不错,但这样的高亮有个问题,那就是他的背景色并不随着你所加载了 highlight.js 主题样式而改变,而且不同语言的代码在配色上的一些差异也没有很好的渲染出来。...而从 highlight.js 官网示例可以看到,这些问题本不应该出现的。 为了实现与 highlight.js 官网示例中的主题效果,可以在页面中自己完成代码高亮的渲染。...如果使用它,当使用 vue-router 导航到一个新的‘页面’之后,新页面中的代码块可能无法被正确渲染。这也是为什么在 updated 钩子中再次调用 highlightCode()的原因。...对于一个软件,官方文档是有必要仔细读的,就像前面提到的 highlight.js 中 initHighlighting() 方法的问题,其实在官方文档中也有解释。
博客园的markdown模式下的代码高亮功能使用的是highlight.js,没有行号和显示相应编程语言的功能,只好自己将其改造了一下(将这两种功能一并实现了)~ 先看一下效果,再详细介绍方法~ [img...: "MathML", "css": "CSS", "clike": "C-like", "js": "JavaScript...prepend( '<a href="<em>javascript</em>...include进来<em>highlight.js</em>,虽然首页是默认不load <em>highlight.js</em><em>的</em>,但可使用JQuery<em>的</em>getScript<em>函数</em>去加载之。...上述js<em>函数</em>setCodeRowWithLang()对文章内容和博客首页都是有效<em>的</em>~ 本文首发于本人<em>的</em>博客园博客: https://www.cnblogs.com/enjoy233/p/10410089
2)第三方裤文件过大造成的 由于说明文档有部分要代码高亮展示,文中用到了 highlight.js 代码高亮库。自行写了个组件,代码如下: <!...,也就是引入 highlight.js 那里干掉。.../lang/xml")); Hljs.registerLanguage("javascript", require("..../lang/javascript")); 再次编译,编译后 180kb,尚在接受范围。...探究了一番,因为是异步加载,所以不能动态传值的, map 遍历的时候路径组合 x 值是动态传入,导致打包后无法识别。最后修改为静态的,问题解决了。
最近在vuepress中撰写UI框架文档时发现在组件中插入演示代码没高亮,虽然在文档markdown中写代码有高亮但就无法实现折叠了,而且vuepress没有提供折叠代码的配置,因此实现一个折叠组件外加代码高亮的插件就十分有必要.../public/index.scss' export default ({ Vue, // VuePress 正在使用的 Vue 构造函数...安装 yarn add -D highlight.js 2....Vue 构造函数 // options, // 附加到根实例的一些选项 // router, // 当前应用的路由实例...使用 之后在包装代码的外层div加上v-highlight指令,并在code标签标明代码模板类型为html/javascript/css <div class="code-content"
我们既然需要开发一款 Markdown 编辑器,我们需要的依赖库有下面几种: Strve-js: 一个轻量级的 JavaScript 框架,用于构建用户界面; Marked: 一个将 Markdown...转换为 HTML的库; Highlight: 让网页上的代码高亮美化的免费开源工具库; Lodash: 一个实用的 JavaScript 工具库; 那么你就会看我们引入了这些库。...然后定义一个名为 compiledMarkdown 的函数,该函数使用 Marked 库将 input 变量中的 Markdown 文本转换为 HTML。...然后再定义一个名为 update 的函数,该函数在用户输入时调用。它使用 Lodash 的 debounce 函数来防止频繁触发,提高性能。...使用 Strve 的 createApp 函数创建一个 App 实例并挂载到 id 为app的元素上。 核心逻辑讲完了,那么我们欣赏下这款 Markdown 编辑器完整代码吧!
Vue组件,Vue组件是一个包含特定选项的JavaScript对象,我们平常开发一般使用的是Vue单文件,单文件最终也会被编译成选项对象,这个工作是@vitejs/plugin-vue做的,显然这个插件并不能处理...Markdown文件,那么最终也就无法生成正确的Vue组件。...Vite插件扩展了Rollup的接口,并且带有一些 Vite 独有的配置项,配置项类型基本就是两种,一种是属性,一种是钩子函数,插件的主要逻辑都在钩子函数里,Rollup和Vite提供了构建和编译时各个时机的钩子...接下来配置了两个钩子函数,我们详细来看。...highlight.js,最开始使用md插件时我们传入了参数: { style: get(varletConfig, 'highlight.style') } 这个用于设置highlight.js的主题
highlight.js 官网:highlight.js Github:highlight.js 针对Web程序所做的高亮显示上色。...Moment.js 官网:Moment.js 轻量级专门解析、验证、操作、格式化日期的JavaScript函数库,Moment.js是为浏览器和Node.js而设计,所有组件都可以在这两个环境下运行。...Algolia Places 官网:Algolia Places Algolia Places为您的网站提供一个快速、简单的方式,自动化产生地址建议列表的JavaScript函数库。...Leaflet.js 官网:Leaflet Github:Leaflet Leaflet是一个对移动设备友善的互动地图并且开源的JavaScript函数库,总大小只有38KB,却有着大多数开发人员想要的需要...toastr 官网:Toastr toastr是一个提示信息JavaScript函数库,必须载入jQuery,宗旨是利用简单的程序函数库来做定制化跟扩展。
领取专属 10元无门槛券
手把手带您无忧上云