简介

RoslynPad是贰个Apache
2.0协商开源的轻量级C#编辑器。扶助电动完成,语法提醒,修改建议等效果。很适合平日随手写个C#先后看看运行结果。

脚下版本:0.10.1,不必要保存也能够运转获得结果(F5运维),可导出dll文件,集成了nuget。

 

官网:

github下载:
(不经常候官方网站下载比相当的慢,在github上下载可能会快一些)

世界上有五个高大的编辑器:二个是emacs,三个是vi。它们从出生以来,一贯在Unix/Linux世界得到最常见的支撑。
固然过了几十年,在Windows平台上和跨平台上有屡见不鲜的后发先至不断挑战它们的地点,比方编辑器界的Sublime
Text,Ultra Editor,Notepad++,pspad,Atom,Visual Studio
Code,IDE界的Eclipse, AMDlJ IDEA,
NetBeans等等,不过它们的身份从未动摇过。
写C#的最棒IDE一定是Visual Studio,写Java依旧英特尔lJ
IDEA和Eclipse更有助于。不过,对于任何语言和任何职责,比起数见不鲜的后来者,一定是emacs和vim的援救是最布满的。针对叁个一定的职责,只怕Sublime
Text和Atom独有区区三种插件接纳依旧是绝非,然则在vim和emacs上得以找到大多页。

持续两周的课程设计截止了,这一次已经是大家小组第三次同盟了,相比较以前我们都进化了众多,所以同盟照旧很顺遂的。大家这一次做的是八个OJ(Online
Judge在线检查实验代码的平台)。作者想作为一个热衷编制程序或许学习编制程序的人或多或少都有接触过算法,自身已经也刷过一些算法,不过相对老董的题量大概是九牛一毛,笔者想一个对此算法这么有色金属研商所究的大神,确定极其想做个和睦的OJ,那是一种心态,这几天感觉就如学习Computer的人都特别有激情。废话相当的少说了,作者是写前端的,所以往台就让专门的学业的人说,笔者就总括下本人的前端知识。

编辑器预览

编辑器的分成以下三片段

  1. 右臂:能够领会为工程目录
  2. 右上部分:源代码编辑区
  3. 右下部分:运转结果区

图片 1

那二种编辑器的求学曲线确实是周旋相比陡的,然则,一旦修炼成功,这样的交付是纯属值得的。形成学习困难的根本缘由,其实是效果与利益太多太庞大。那么些修炼须求花相当的多的肥力和岁月,想修成上仙以至上神是不易于的,可是,只要坚定不移下去,最后确定可以形成。好了,废话较少说了,大家发轫修炼之旅。


修仙此前,大家先享受一下凡人的活着。大家先看看哪些利用各位上仙上神做好的乐器,也便是写好的台本。

一. 代码编辑框

选拔vundle处理插件

做为人类,大家先不研商上仙上神们是如何布署脚本地方的,我们归总通过vundle来管理其他插件。

先是大家下载Vundle,通过git命令,特别轻便:

git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

上边大家再通过修改/.vimrc来配置一下,把下面原封不动抄到/.vimrc就好:

set nocompatible              " be iMproved, required
filetype off                  " required

" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

" let Vundle manage Vundle, required
Plugin 'VundleVim/Vundle.vim'

" All of your Plugins must be added before the following line
call vundle#end()            " required
filetype plugin indent on    " required
" To ignore plugin indent changes, instead use:
"filetype plugin on

笔者们只须要在call
vundle#end()那一行以前,加上大家须要的plugin的情节就足以了。
下边大家早先vim plugin的寻宝之旅,第一站当然是官方网站!

本身想大家最在乎的应当正是代码编辑框应该怎么落到实处,当然那不是本身要好写的,终究独有两周的光阴,造轮子搞出来个那个料定是不容许的,所以就去github找了个开源的代码编辑器,然后搜了下用过的人依然挺多的。帮助三种语言,像C/C++,Java等自然不言而喻,那是链接:https://github.com/ajaxorg/ace
急需的直白下载就行,下来就简单来讲下怎么用吗:

vim插件宝库之官方网站

vim的率先营地自然是官方网站:http://www.vim.org/scripts/index.php

比方作者写C/C++相当多,大家就先拿c.vim来试试看水。
官互连网的插件的git库都放在此处:http://vim-scripts.org/vim/scripts.html
对此官互连网的插件,大家直接选取vim-scripts.org上的目录名就好,比方c.vim,taglist.vim之类的,然后修改~/.vimrc文件:

set nocompatible              " be iMproved, required
filetype off                  " required                                                              

" set the runtime path to include Vundle and initialize                                               
set rtp+=~/.vim/bundle/Vundle.vim                                                                     
call vundle#begin()
" alternatively, pass a path where Vundle should install plugins
"call vundle#begin('~/some/path/here')

" let Vundle manage Vundle, required
Plugin 'VundleVim/Vundle.vim

Plugin 'c.vim'

" All of your Plugins must be added before the following line
call vundle#end()            " required
filetype plugin indent on    " required
" To ignore plugin indent changes, instead use:
"filetype plugin on

重启vim,让新的下一场大家运转:PluginInstall命令,c.vim插件就被活动安装上了。
作者们试验须臾间c.vim的有力功能吗,大家创设一个新的C++文件,譬如test2.cpp,运维:

vim test2.cpp

开发之后,爆发了怎么?c.vim插件已经依照模板自动帮我们转移的文书档案头:

/*
 * =====================================================================================
 *
 *       Filename:  test2.cpp
 *
 *    Description:
 *
 *        Version:  1.0
 *        Created:  2017/06/23 12时24分15秒
 *       Revision:  none
 *       Compiler:  gcc
 *
 *         Author:  YOUR NAME (),
 *   Organization:
 *
 * =====================================================================================
 */
#include <stdlib.h>

举个例子大家要写叁个for循环,试试输入\i0,vim会提醒输入三个变量名,大家就用i吧,于是就生成了那样的代码块:

        for ( i = 0; i < n; i += 1 ) {
        }

更加多的风趣的快捷键效用,能够参见这几个:https://wolfgangmehner.github.io/vim-plugins/csupport/c-hotkeys.pdf

更完整的意义,能够参见文书档案:https://wolfgangmehner.github.io/vim-plugins/doc/csupport.html

也足以通过:help csupport在vim中查阅。

html部分代码:

vim插件宝库之github

除开官方网址之外,github上也是vim插件的特大型营地。非常多官方网站络的插件,在github上也会有镜像。
vundle对于github的支持也是很好的,举例NE凯雷德D
tree的位置是:https://github.com/scrooloose/nerdtree,大家得以归纳github地址,直接输用户名和库名就能够了,例:

     Plugin 'scrooloose/nerdtree'
<div class="code">
    <form role="form">
        <div class="editor-header">
            <select class="form-control form-control-plus"onchange="choiceLang(this)">
                <option value="ace/mode/c_cpp">语言</option>
                <option value="ace/mode/c_cpp" selected="selected">C/C++语言</option>
                <option value="ace/mode/java">JAVA语言</option>
                <option value="ace/mode/javascript">JavaScript语言</option>
            </select>
            <select class="form-control form-control-plus" onchange="choiceBack(this)">
                <option>环境配色</option>
                <option value="ace/theme/xcode" selected="selected">高亮</option>
                <option value="ace/theme/monokai">暗色</option>
            </select>
            <select class="form-control form-control-plus" onchange="choiceSJ(this)">
                <option value="4">代码缩进</option>
                <option>2</option>
                <option selected="selected">4</option>
                <option>8</option>
            </select>
            <div class="flex-btn" onclick="expand('spanid')">

            </div>
        </div>
    </form>
    <pre id="editor" style="height:400px"></pre> 
    <button class="btn btn-primary" onclick="submit()">提交</button>
</div>

凡git库皆可协助

貌似的话,官方网址和github上一度充足用了。然而,总是有部分特种必要,举例公司里面使用之类的。那时候,我们借使附上git的地方就好,例:

Plugin 'git@gitlab.alibaba-inc.com:ziying.liuziying/studyvim.git'

form表单中的下拉框是用来抉择语言,编辑器背景,以及代码的缩进的,将下拉框中的value值设为内定的值,传入对应的接口就能够了。
上面来一句话来说一下所要用到的接口:

地面目录

只要上面二种方法都不扶助,举个例子是我们和好的写的插件,不想放到英特网去,我们仍是能够钦点地点目录的法子来采用插件。

例:

Plugin 'file:///home/gmarik/path/to/plugin'

初步化:将语言默以为C/C++,背景默以为高亮,缩进默以为4

Vundle简明手册

var editor = ace.edit("editor");  //该值为编辑框的id值
window.onload = (function () {
    editor.setTheme("ace/theme/xcode"); //设置背景色为高亮
    editor.session.setMode("ace/mode/c_cpp");  //设置默认语言为c/c++
    editor.getSession().setTabSize(4);  //设置默认缩进大小
})();

手动格局

即使将插件名写进.vimrc,然后经过:PluginInstall命令去安装

  • PluginList命令:列出已经设置的插件。

上面是自家设置的有的插件:

" My Plugins
Plugin 'VundleVim/Vundle.vim'
Plugin 'd.vim'
Plugin 'taglist.vim'
Plugin 'scrooloose/nerdtree'
Plugin 'c.vim'
Plugin 'OmniCppComplete'
Plugin 'clang-complete'
Plugin 'AutoComplPop'
Plugin 'bufexplorer.zip'
Plugin 'SuperTab'
Plugin 'SrcExpl'
Plugin 'molokai'
Plugin 'omlet.vim'
Plugin 'cpp.vim'
Plugin 'thinca/vim-logcat'
Plugin 'vim-scripts/prop.vim'
Plugin 'mglb/vim-android-syntax'
  • PluginInstall命令:安装在.vimrc中钦命的插件。如若要更新的话使用:PluginInstall!
    或者:PluginUpdate命令

  • PluginClean:删除从.vimrc中剔除的plugin

转移语言,背景观,缩进大小,value为下拉框的值:

相互之间形式

:PluginSearch命令能够搜寻字符串,搜索到今后,就可以直接点击i举办设置。
可是重启vim之后就未有了。希望每便运行后皆有的话,依旧写进.vimrc吧。

 //设置语言
function choiceLang(select){
    editor.session.setMode(select.value);
}
//设置背景色
function choiceBack(select){
    editor.setTheme(select.value); 
}
//设置缩进大小
function choiceSJ(select){
    editor.getSession().setTabSize(select.value);
}

赢得所要提交的代码:

function submit(){
    var code  = editor.getValue();
}

放几张图看下效果:

这里写图片描述

此地写图片描述

二. 动态改动代码运转状态

先上图:

那边写图片描述

此间运用了八个加载转圈的插件,下载链接:https://github.com/fgnass/spin.js

//动画
window.onload = function(){
    //加载转圈,插件提供的配置接口
    var opts = {
          lines: 13, //小长条的数量
          length: 13, //小长条的长度
          width: 3, //小长条的宽度
          radius: 15, //内环的半径长
          corners: 1, // Corner roundness (0..1)
          rotate: 0, //旋转角度
          direction: 1, //1:顺时针方向 -1:逆时针方向
          color: '#000', //颜色
          speed: 1, //每秒转多少圈
          trail: 60, //余晖效果百分比
          shadow: false, //渲染阴影
          hwaccel: false, //加速
          className: 'spinner', //类名spinner
          zIndex: 2e9, //显示在最顶层
          top: 'auto', //相对父元素的top
          left: 'auto' //相对父元素的left ,默认情况spinner是显示于父元素居中位置

        };
        //foo为动画的载体
        var target = document.getElementById('foo');
        //实例化之后开始转圈
        var spinner = new Spinner(opts).spin(target);

    //进度条的变化
    var arr = ['正在上传Uploading','等待测试Pending','正在编译Compiling','正在评测Running','测试通过Accepted'];
    var colors = ['black', '#bbb', '#FC8A15', '#4FC1E9', 'rgb(39, 194, 76)'];
    var progress = document.getElementById('progress');
    var status = document.getElementById('status');
    for (var i = 0; i < 5; i++){
        (function (j){
            setTimeout(function (){
                progress.style.width = 20 * (j + 1) + '%';
                progress.innerHTML = 20 * (j + 1) + '%';
                status.innerHTML = arr[j];
                status.style.color = colors[j];
            }, 1000 * j);
        })(i);
    }

    //5s后停止旋转
    setTimeout(function (){
        spinner.stop();  //转圈停止
    }, 5000);
} 

此地只是五个仿照,具体的退换要基于后台传来的情景而定。

三. 提交代码记录的饼状图分布

运行截图:

此处写图片描述

那边用了三个很知名的插件,chart.js,能够援用cdn,也可以去github下载,cdn:https://cdn.bootcss.com/Chart.js/2.6.0/Chart.min.js
github下载链接:https://github.com/chartjs/Chart.js

代码示例:

var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["submit-failed", "pending", "judging", "accepted", "ComplieError", "RuntimeError"],
        datasets: [{
            label: '# of Votes',
            data: [12, 8, 3, 5, 2, 3],
            backgroundColor: [
                '#BE3144',
                '#bbb',
                '#4797B1',
                'rgb(39, 194, 76)',
                '#FC8A15',
                '#FF847C'
            ],
            borderWidth: 1
        }]
    },
    options: {

    }
});

实际的选项运维一下就很驾驭了,建议咱们去看斯洛伐克语文档,相当多汉语的文书档案都过时了,不然分明不能正确运转,马耳他语文档链接:http://www.chartjs.org/


如上是投机在品种中所用到的插件,大大减小了代码的编排难度,那也是首先次在类型中用外人写好的插件,确实写得很棒,向写插件的大拿致敬。在地点的叙述中都其次链接,希望对有亟待的同学会有扶助,终归搜索退换照旧很费武功的。

备注:那是一个安然无恙的品种,本人承担的是前面二个分界面部分,后台的事体逻辑,以及判题部分都很全,其余项目已经上传至github,应接大家fork和start。项目链接:https://github.com/shiyi1996/OJ

相关文章