47 |
47 |
48 |
49 | [licenseUrl]: https://github.com/ianwalter/codemirror-mode-elixir/blob/master/LICENSE
50 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const { join } = require('path')
2 |
3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
4 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
5 | const HtmlWebpackPlugin = require('html-webpack-plugin')
6 |
7 | const isProduction = process.env.NODE_ENV === 'production'
8 | const src = join(__dirname, 'src')
9 |
10 | module.exports = {
11 | mode: isProduction ? 'production' : 'development',
12 | entry: join(__dirname, 'src/main.js'),
13 | output: {
14 | path: join(__dirname, 'site'),
15 | filename: 'js/[name].bundle.js',
16 | chunkFilename: 'js/[id].[chunkhash].js'
17 | },
18 | resolve: {
19 | extensions: ['.js', '.vue', '.json'],
20 | alias: {
21 | '@': src
22 | }
23 | },
24 | module: {
25 | rules: [
26 | { test: /\.js$/, include: src, loader: 'babel-loader' },
27 | { test: /\.vue$/, include: src, loader: 'vue-loader' },
28 | {
29 | test: /\.s?css$/,
30 | include: src,
31 | use: [
32 | isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
33 | {
34 | loader: 'css-loader',
35 | options: { importLoaders: 1 }
36 | },
37 | 'sass-loader'
38 | ]
39 | }
40 | ]
41 | },
42 | plugins: [
43 | new VueLoaderPlugin(),
44 | new HtmlWebpackPlugin({ template: './src/index.html' }),
45 | ...(isProduction ? [new MiniCssExtractPlugin()] : [])
46 | ]
47 | }
48 |
--------------------------------------------------------------------------------
/src/code.js:
--------------------------------------------------------------------------------
1 | export const code = `# Some code examples borrowed from https://learnxinyminutes.com/docs/elixir/
2 |
3 | # Module
4 | defmodule MyModule do
5 | @moduledoc """
6 | This is a built-in attribute on a example module.
7 | """
8 |
9 | # Struct
10 | defstruct name: nil, age: 0, height: 0
11 |
12 | # Function
13 | def function_one do
14 | {:ok, "one"}
15 | end
16 |
17 | # Pattern matching
18 | def function_two do
19 | {:ok, msg} = function_one
20 | IO.puts msg
21 | end
22 |
23 | # Try/Rescue block
24 | def function_three do
25 | try do
26 | raise "some error"
27 | rescue
28 | RuntimeError -> "rescued a runtime error"
29 | _error -> "this will rescue any error"
30 | end
31 | end
32 |
33 | # Pipes
34 | def function_four(start, finish) do
35 | Range.new(start, finish)
36 | |> Enum.map(fn x -> x * x end)
37 | |> Enum.filter(fn x -> rem(x, 2) == 0 end)
38 | end
39 | end
40 | `
41 |
42 | export const htmlScript = `
43 |
44 | `
45 |
46 | export const jsImport = `// If you're using frontend build tools like Webpack and Babel,
47 | // you can simply import the module and register the mode:
48 | import CodeMirror from 'codemirror'
49 | import 'codemirror-mode-elixir'`
50 |
51 | export const create = `CodeMirror.fromTextArea(document.getElementById('code'), { mode: 'elixir' })`
52 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 | npm install codemirror-mode-elixir
31 |