LLWiki正在建设中,欢迎加入我们!
“MediaWiki:Gadget-site-lib.codemirror.js”的版本间差异
跳转到导航
跳转到搜索
小 |
(// 使用Wikiplus小工具快速编辑) |
||
(未显示同一用户的12个中间版本) | |||
第2行: | 第2行: | ||
// 由ResourceLoader直接调用,不可使用ES6语法 |
// 由ResourceLoader直接调用,不可使用ES6语法 |
||
/** |
/** |
||
* @ |
* @Description: LLWiki定义的CodeMirror扩展函数,桌面版、手机版均可用 |
||
⚫ | |||
* 2. 高亮显示页 |
* 2. 高亮显示页内Wikitext代码(CodeMirror.runmode) |
||
⚫ | |||
* @ |
* @Author: 无特殊说明时均为[[User:Bhsd]] |
||
*/ |
*/ |
||
"use strict"; |
"use strict"; |
||
/*global |
/*global CodeMirror*/ |
||
⚫ | |||
/** |
|||
* @Function: 根据内容模型下载需要的CodeMirror模式 |
|||
* @Param {String} alias, 内容模型名称或别名 |
|||
* @Return {Promise} 表示下载是否成功的Promise对象 |
|||
*/ |
|||
const promise = {javascript: null, css: null, lua: null, wiki: null}, |
const promise = {javascript: null, css: null, lua: null, wiki: null}, |
||
aliases = { js: 'javascript', javascript: 'javascript', json: 'javascript', css: 'css', |
aliases = { js: 'javascript', javascript: 'javascript', json: 'javascript', css: 'css', |
||
lua: 'lua', scribunto: 'lua', wikitext: 'wiki', mediawiki: 'wiki' |
lua: 'lua', scribunto: 'lua', wikitext: 'wiki', mediawiki: 'wiki', wiki: 'wiki' |
||
}; |
}; |
||
CodeMirror.download = function(alias) { |
CodeMirror.download = function(alias) { |
||
const name = aliases[ alias.toLowerCase() ]; |
const name = aliases[ alias.toLowerCase() ]; |
||
if (!(name in promise)) { |
if (!(name in promise)) { |
||
console.error( '无法识别的CodeMirror模式' ); |
|||
throw null; |
|||
} |
|||
if (!promise[ name ]) { |
if (!promise[ name ]) { |
||
if (name == 'wiki') { |
if (name == 'wiki') { |
||
promise[ name ] = mw.config.get( 'extCodeMirrorConfig' ) ? Promise.resolve() : // 兼容CodeMirror扩展 |
promise[ name ] = mw.config.get( 'extCodeMirrorConfig' ) ? Promise.resolve() : // 兼容CodeMirror扩展 |
||
mw.loader.using('ext.CodeMirror.data'); |
|||
⚫ | |||
url: '//cdn.jsdelivr.net/gh/bhsd-harry/LLWiki@1.6/json/gadget-CodeMirror.json' |
|||
}).then(function(config) { mw.config.set( 'extCodeMirrorConfig', config ); }, |
|||
function(reason) { throw reason; } |
|||
⚫ | |||
} else { |
} else { |
||
promise[ name ] = |
promise[ name ] = ['clike', 'css', 'htmlmixed', 'javascript', 'php', 'xml'].includes(name) |
||
? mw.loader.using('ext.CodeMirror.lib.mode.' + name) |
|||
⚫ | |||
⚫ | |||
}); |
|||
⚫ | |||
⚫ | |||
} |
} |
||
} |
} |
||
第34行: | 第40行: | ||
}; |
}; |
||
/** |
|||
// 2. 高亮显示页面代码 |
|||
* @Function: 高亮页内Wikitext代码 |
|||
⚫ | |||
⚫ | |||
observer.unobserve( obj.target ); |
|||
* @EditedBy: [[User:Bhsd]] |
|||
* @Param {jQuery} $pre, 写有Wikitext代码的jQuery对象 |
|||
*/ |
|||
⚫ | |||
const mode = CodeMirror.getMode({mwConfig: mw.config.get( 'extCodeMirrorConfig' )}, 'mediawiki'), |
const mode = CodeMirror.getMode({mwConfig: mw.config.get( 'extCodeMirrorConfig' )}, 'mediawiki'), |
||
$target = $( |
$target = $(target), |
||
lines = CodeMirror.splitLines( $target.text().trim() ), |
lines = CodeMirror.splitLines( $target.text().trim() ), |
||
state = mode.startState(), |
state = mode.startState(), |
||
第58行: | 第68行: | ||
); |
); |
||
} |
} |
||
$('<span>', {text: stream.current() |
$('<span>', { text: stream.current(), class: style.filter(function(ele) { |
||
return !ele.startsWith( 'line-' ); |
return !ele.startsWith( 'line-' ); |
||
}).map(function(ele) { return 'cm-' + ele; }) ).appendTo( $line ); |
}).map(function(ele) { return 'cm-' + ele; }).join( ' ' ) }).appendTo( $line ); |
||
stream.start = stream.pos; |
stream.start = stream.pos; |
||
} |
} |
||
return $line[0]; |
return $line[0]; |
||
}); |
}); |
||
$target |
$target.addClass( 'runmode' ).empty(); |
||
if ($target.hasClass( 'linenums' )) { // 添加行号 |
|||
}, |
|||
const start = $target.data( 'start' ) || 1; |
|||
callback = function(entries) { entries.filter(function(obj) { return obj.isIntersecting; }).forEach( render ); }, |
|||
$('<ol>', { start: start, |
|||
observer = new IntersectionObserver(callback, {threshold: 0.01}); // jshint ignore: line |
|||
html: content.map(function(ele, i) { return $('<li>', {html: ele, id: 'L' + (i + start)}); }) |
|||
⚫ | |||
}).css('padding-left', (content.length + start - 1).toString().length + 2.5 + 'ch').appendTo( $target ); |
|||
if (!CodeMirror.modes.includes( 'mediawiki' ) || !mw.config.get( 'extCodeMirrorConfig' )) { |
|||
} else { $target.append( content ); } |
|||
throw new Error( '未加载CodeMirror的mediawiki模式' ); |
|||
}; |
|||
⚫ | |||
observer.observe( pre ); |
|||
CodeMirror.download( 'wiki' ).then(function() { $pre.toArray().forEach( render ); }); |
|||
}; |
}; |
||
//</nowiki> |
//</nowiki> |
2022年5月17日 (二) 19:45的最新版本
//<nowiki> // 由ResourceLoader直接调用,不可使用ES6语法 /** * @Description: LLWiki定义的CodeMirror扩展函数,桌面版、手机版均可用 * @Function: 1. 下载需要的CodeMirror模式(CodeMirror.download) * 2. 高亮显示页内Wikitext代码(CodeMirror.runmode) * @Author: 无特殊说明时均为[[User:Bhsd]] */ "use strict"; /*global CodeMirror*/ /** * @Function: 根据内容模型下载需要的CodeMirror模式 * @Param {String} alias, 内容模型名称或别名 * @Return {Promise} 表示下载是否成功的Promise对象 */ const promise = {javascript: null, css: null, lua: null, wiki: null}, aliases = { js: 'javascript', javascript: 'javascript', json: 'javascript', css: 'css', lua: 'lua', scribunto: 'lua', wikitext: 'wiki', mediawiki: 'wiki', wiki: 'wiki' }; CodeMirror.download = function(alias) { const name = aliases[ alias.toLowerCase() ]; if (!(name in promise)) { console.error( '无法识别的CodeMirror模式' ); throw null; } if (!promise[ name ]) { if (name == 'wiki') { promise[ name ] = mw.config.get( 'extCodeMirrorConfig' ) ? Promise.resolve() : // 兼容CodeMirror扩展 mw.loader.using('ext.CodeMirror.data'); } else { promise[ name ] = ['clike', 'css', 'htmlmixed', 'javascript', 'php', 'xml'].includes(name) ? mw.loader.using('ext.CodeMirror.lib.mode.' + name) : $.get({ dataType: 'script', cache: true, url: '//cdn.jsdelivr.net/npm/codemirror@5.35.0/mode/' + name + '/' + name + '.min.js' }); } } return promise[ name ]; }; /** * @Function: 高亮页内Wikitext代码 * @Source: [https://codemirror.net/addon/runmode/runmode.js] * @EditedBy: [[User:Bhsd]] * @Param {jQuery} $pre, 写有Wikitext代码的jQuery对象 */ const render = function(target) { const mode = CodeMirror.getMode({mwConfig: mw.config.get( 'extCodeMirrorConfig' )}, 'mediawiki'), $target = $(target), lines = CodeMirror.splitLines( $target.text().trim() ), state = mode.startState(), content = lines.map(function(line) { const stream = new CodeMirror.StringStream( line ), $line = $('<pre>'); var token, style; if (!stream.string) { token = mode.blankLine( state ); style = token ? token.trim().split( /\s+/ ) : []; return $line.addClass( style.map(function(ele) { return ele.slice(5); }) )[0]; } while (!stream.eol()) { token = mode.token(stream, state); style = token ? token.trim().split( /\s+/ ) : []; if (stream.start === 0) { $line.addClass( style.filter(function(ele) { return ele.startsWith( 'line-' ); }) .map(function(ele) { return ele.slice(5); }) ); } $('<span>', { text: stream.current(), class: style.filter(function(ele) { return !ele.startsWith( 'line-' ); }).map(function(ele) { return 'cm-' + ele; }).join( ' ' ) }).appendTo( $line ); stream.start = stream.pos; } return $line[0]; }); $target.addClass( 'runmode' ).empty(); if ($target.hasClass( 'linenums' )) { // 添加行号 const start = $target.data( 'start' ) || 1; $('<ol>', { start: start, html: content.map(function(ele, i) { return $('<li>', {html: ele, id: 'L' + (i + start)}); }) }).css('padding-left', (content.length + start - 1).toString().length + 2.5 + 'ch').appendTo( $target ); } else { $target.append( content ); } }; CodeMirror.runmode = function($pre) { CodeMirror.download( 'wiki' ).then(function() { $pre.toArray().forEach( render ); }); }; //</nowiki> // [[category:作为模块的小工具]] [[category:桌面版小工具]] [[category:手机版小工具]] [[category:系统工具]] // {{DEFAULTSORT:site-lib.codemirror.js}}