teratailはそろそろ、英字がたくさんある塊は自動的にcodeブロックにする機能を搭載した方が良い気がするのは気のせいかについて。

ただでさえぐちゃぐちゃのコードがインデント無しで展開されて見るのがつらいし、
指摘し続けるのは不毛だし、
C言語とかだと見出しドーン、見出しドーン、見出しドーンってなって、
いい加減イライラしてくるので、
技術者のサイトである矜持を以って、ユーザビリティの改善を図るのが寛容と考えるがいかがか？

良い方法が思いつかないのであれば、協力を惜しまない良き回答者も多かろうぞ。

そろそろポイントが貯まってきたので、有効活用させていただこうと存ずる。

##謝辞

おのおのがた、大儀であらせられた。かねてよりの見出しドーンを心苦しう思われておられる皆々の心情、相分かった。

また、自動差保御人の誤りをご懸念されるのも尤も。されど、失敗を恐れていては技術の進歩はありえぬ。技士の名折れと心得よ。

かくなる上は、城主寺尾守様に当評議御査収頂き、下々の声、何卒お聞き入れ頂くよう願い奉る次第。

最後に重ねて、皆の日々の勤勉に対し、謝辞を申し述ぶる。

####補足

いつも質問を根こそぎ削除され申すがため、此度こそはベストアンサーを選びとう御座る。

####例

老母を医者に送り迎えする傍ら、つらつらとコードなどを書いておった。

jQuery
1$(function()
2{
3    const   LINE_TYPE = { WORD: 0, CODE: 1, BLANK: 2, CODE_BLOCK: 3, FOREIGN: 4, COMMENT_START: 5, COMMENT_END: 6 };
4    
5    $("#confirm-button").on("click", function()
6    {
7        let content  = $("#hoge").val();
8        let lines    = content.split("\n");
9        let continually = 0;
10        let skip_code_block     = false;
11        let start_code_block    = false;
12        let start_comment_block = false;
13       
14        for(let i = lines.length; i >= 0 ; i--)
15        {
16            let line_type = isCodeLine(lines[i], i);
17            
18            switch(line_type)
19            {
20                case LINE_TYPE.FOREIGN:
21                    if(!start_code_block)
22                    {
23                        lines[i] = "> " + lines[i];
24                        break;
25                    }
26                
27                case LINE_TYPE.COMMENT_START:
28                case LINE_TYPE.COMMENT_END:
29                    if(line_type == LINE_TYPE.COMMENT_START) { start_comment_block = false; }
30                    if(line_type == LINE_TYPE.COMMENT_END)   { start_comment_block = true;  }
31                
32                case LINE_TYPE.BLANK:
33                    if(!start_code_block){ break; }
34                
35                case LINE_TYPE.CODE:
36                    if(!skip_code_block)
37                    {
38                        continually++;
39                        start_code_block = true;
40                    }
41                    break;
42            
43                case LINE_TYPE.CODE_BLOCK:
44                    skip_code_block != skip_code_block;
45                    
46                    break;
47                    
48                case LINE_TYPE.WORD:
49                    if(start_comment_block)
50                    {
51                        if(!skip_code_block)
52                        {
53                            continually++;
54                            start_code_block = true;
55                        }
56                        break;
57                    }
58                    
59                    start_code_block = false;
60                    if(continually < 5) { continue; }
61                    
62                    // コードブロックでラップ
63                    let target = i + 1;
64                    lines.splice(target + continually, 0, "```\n");
65                    if(lines[target].trim() == "") { target++; }
66                    lines.splice(target, 0, "```何のコードですか？\n");
67                    
68                    continually = 0;
69                    
70                    break;
71            }
72        }
73
74
75        // 確認ウィンドウ表示
76
77        let html = parseMarkdown(lines);
78        
79        let button  = $("<button/>").attr("id", "submit-button").html("投稿する");
80        let control = $("<div/>").addClass("controls").append(button);
81        let preview = $("<div/>").addClass("preview").append(html);
82        let outer   = $("<div/>").addClass("shadow").append(preview).append(control);
83
84        $("body").append(outer);
85        $("input.code-tag").on("focus", function()
86        {
87            clearInterval(timer);
88            $(this).css("background-color", "#fff").css("opacity", 1);
89        });
90    });
91    
92    function isCodeLine(line, i)
93    {
94        if(line === undefined)      { return LINE_TYPE.WORD; }
95        if(line.trim().length == 0) { return LINE_TYPE.BLANK; }
96        
97        if(line.trim().match(/^//.*$/))   { return LINE_TYPE.COMMENT_START; }
98        if(line.trim().match(/^/*.*$/))   { return LINE_TYPE.COMMENT_START; }
99        if(line.trim().match(/^*/.*$/))   { return LINE_TYPE.COMMENT_END; }
100        
101        if(line.trim().match(/^#.+$/))      { return LINE_TYPE.COMMENT_START; }
102
103        if(line.trim().match(/^```.*$/))    { return LINE_TYPE.CODE_BLOCK; }  // 欠落しておった
104        
105        // erase string literal
106        line = line.replace(/"(.+)"/g, "");
107        line = line.replace(/'(.+)'/g, "");
108         
109        let all_charactors = line.length;
110        var alpha_numerics = 0;
111       
112        line.split("").forEach(function(value)
113        {
114            alpha_numerics += (value.match(/[a-zA-Z0-9 \"'`/#%&$.,:;<>()[]{}\t]/))? 1 : 0;
115        });
116        
117        let alpha_numeric_ratio = alpha_numerics / all_charactors;
118        
119        if(isForeginLanguage(line, alpha_numeric_ratio))    { return LINE_TYPE.FOREIGN; }
120        if(alpha_numeric_ratio > 0.75)                      { return LINE_TYPE.CODE; }
121        
122        return LINE_TYPE.WORD;
123    }
124    
125    function isForeginLanguage(line, alpha_numeric_ratio)
126    {
127        if(alpha_numeric_ratio < 0.95)      { return false; }
128        if(line.trim().match(/^.+[.,!?]$/)) { return true; }
129        if(line.length < 40)                { return false; }
130        return false;
131    }
132
133    ///////////////////////////////////////////////////
134    //
135    // ここから適当
136    
137    function parseMarkdown(lines)
138    {
139        let html = "";
140        
141        for(let i in lines)
142        {
143            lines[i] = lines[i].replace(/</g, "&lt;");
144            lines[i] = lines[i].replace(/>/g, "&gt;");
145            if(lines[i].trim().match(/^&gt; .+$/)){ lines[i] = lines[i].replace(/^&gt; (.+)$/ ,"<blockquote>$1</blockquote>"); }
146            html += lines[i] + "\n";
147        }
148        
149        let result = html.replace(/```(.*)\n([^`]+)```/g, "<br><input type='text' class='code-tag' placeholder='$1'></span><pre>$2</pre>");
150        
151        return result;
152    }
153    
154    let timer;
155    let angle = 0;
156
157    timer = setInterval(function()
158    {
159        let radian = angle * (Math.PI / 180) / 2;
160        angle += 20;
161        if(angle >= 180) { angle -= 180; } 
162        
163        $("input.code-tag").css("opacity", Math.sin(radian) + 0.5);
164        
165    }, 150);
166});

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>TODO supply a title</title>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8        <script src="./markdown.js"></script>
9<style>
10    
11    html {
12        height: 100%;
13    }
14
15    body {
16        height: 100%;
17        margin: 0;
18    }
19
20    textarea {
21        width: 640px;
22        height: 640px;
23        margin: 0px;
24    }
25    
26    div.pane {
27        float: left;
28        margin: 4px;
29        padding: 0px;
30        width: 640px;
31        height: 640px;
32        border: solid 1px #efefef;
33    }
34    
35    div.shadow {
36        box-sizing: border-box;
37        position: absolute;
38        width: 100%;
39        height: 100%;
40        top: 0px;
41        left: 0px;
42        background-color: rgba(0,0,0, 0.75);
43        text-align: center;
44    }
45    
46    div.controls {
47        clear: both;
48        box-sizing: border-box;
49        padding: 12px 4px;
50        text-align: center;
51    }
52    
53    div.preview {
54        display: inline-block;
55        text-align: left;
56        width: 95%;
57        margin-top: 20px;
58        padding: 10px;
59        left: 10px;
60        top: 10px;
61        background-color: #fefefe;
62    }
63    
64    pre {
65        box-sizing: border-box;
66        border: solid 1px #efefef;
67        margin: 5px 10px 20px 10px;
68        padding: 10px;
69        font-weight:  bold;
70    }
71    
72    blockquote {
73        border-left: solid 4px #aaa;
74        padding-left: 10px;
75    }
76    
77    input.code-tag {
78        clear: both;
79        margin-top: 20px;
80        margin-left: 10px;
81        background-color: #ff9999;
82    }
83    
84</style>
85    </head>
86    <body>
87        <div id="content-pane" class="pane">
88            <textarea id="hoge" name="hoge" class="hoge">
89以下のコードが全く動かないんですが、なんとかしてください。
90
91#include <studio.h>
92#include <stdlib.h>
93#include <math.h>
94
95/*
96 * ここからがメイン関数です。
97 */
98int main()
99{
100    // メッセージを出力する
101    printf("Hello, world %d", add(2, 3));
102}
103
104/*
105 * かさーん。
106 */
107int add(int a, int b)
108{
109    return a + b;
110}
111
112The following error message appears. It seems to me like a bug. Are there any ways to fix this? The version I'm using is PHP 5.4.
113というエラーメッセージが出ます。
114
115もう、全然わかんないです｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡
116            </textarea>
117        </div>
118        
119        <div class="controls">
120            <button type="button" id="confirm-button">質問文を確認して投稿する</button>
121        </div>
122        
123    </body>
124</html>

sazi

2018/04/11 07:28 編集

寛容じゃなく肝要では。※以前誤字を指摘いただいたので、敢えて。

退会済みユーザー

2018/04/11 07:25

ほんとだし。ずっと勘違いしておった。

退会済みユーザー

2018/04/11 07:31

うむ、飽きたのでコードを晒したが、崩壊しておる。

退会済みユーザー

2018/04/11 07:38

なぜかインデントが崩れる。解せぬ…。

行動規範の内容に同意します

回答10件

ベストアンサー

こういうのはどうでしょう？

半角英数字の割合が多いか一定の字数を超えるものはコードとみなす
コードと前後連続した行に半角英数字が一定以上あればコードとみなす(1 よりは基準を低くする)
コードと連続した行が空行であればコードとみなす
コードブロックが存在しなければコードの塊は自動的にコードブロックにする
質問者・回答者は簡単な操作で設定を記憶させることでこのロジックを無効にできる
自動コードブロックが適用された質問・回答は投稿前にその旨表示し、次回からは自分でコードブロックを使用するよう毎回促す

もう大分慣れましたが、インデントの無い Python や見出しドーンの C は異常です。とても技術者のサイトとは思えませんので可能であれば何らかの対応をお願いしたいところです。

投稿2018/04/11 02:57

Zuishin

総合スコア28660

dodox86

2018/04/11 03:13

いいですね。整形されていない質問と思しき内容は、投稿直前にワンクッション置いて、自動でプレビューで変更案を提示するとか。

Zuishin

2018/04/11 03:15

なるほど、その手もありますね。強制修正よりいいかもしれません。

退会済みユーザー

2018/04/11 03:18

和尚は実に達人であらせられる。

ozwk

2018/04/11 03:33

整形なしの基準も、コードブロックが * 「コード」のまま * 空白 * 存在しないで簡易的にできそうですね。

行動規範の内容に同意します

ご本人からが良いとは思うのですが、LouiS0616さんがご自身の回答中で案内されている、gifを使った説明が質問投稿時に表示されるだけでも変わってくるのじゃないかと。

https://teratail.com/questions/120868

追記

ユーザビリティを高めるのには幾つかアプローチがあるかと思います。

・誘導する

現在の質問投稿の機能に関しては、この部分でケアされていますし、紹介した内容もこの類です。

・自動化する

これについては、全くケアされておらず、質問の意図もここにあると思います。
ただ、入力欄が分かれていて、コード欄は自動的にmarkdownされるというのであれば、不要な気もします。

・フォローする

ユーザビリティとは関係なく、質問の質を高めるもので、「stack overflow」などで採用されています。
ユーザビリティを高めても、多分イレギュラーは付き物で、質問を質問者以外が編集可能とすることが、
最後の砦じゃないでしょうか。
一定のスコア、ベストアンサー率などを編集権限の資格にすれば問題ないと思うのですが。

※矜持をもって完璧な自動化が対応できればいいですが、万能ツールを準備しておくのは悪い癖でしょうか・・・

投稿2018/04/11 02:40

編集2018/04/11 04:32

sazi

総合スコア25173

退会済みユーザー

2018/04/11 02:44

それで多少なりとも改善さるるとは存ずるが、前時代的で、面白みに欠け申す。

sazi

2018/04/11 02:53

侍におなりで？これはまた前時代的な。

退会済みユーザー

2018/04/11 03:19

はて？　何を申されるのか解せぬ。

sazi

2018/04/11 03:39

レガシーでも改善されるならと思いましたが、「技術者の集うサイトである矜持」を持ってさらに良いものをって事ですね。

退会済みユーザー

2018/04/11 03:44

左様。機械に人を合わせるのでは御座らぬ。人に機械を合わせるのが真の道とぞ思ふ。

行動規範の内容に同意します

英語ドキュメントの引用をすることもあるので、止められないと逆に困ります。

投稿2018/04/11 01:59

maisumakun

総合スコア145183

退会済みユーザー

2018/04/11 02:01 編集

最悪、英語ドキュメントがコードブロックに囲まれて困る事があるとも思えぬ。

maisumakun

2018/04/11 02:02

コードブロックは自動改行されないので、横スクロールが必要になってかなり読みづらくなります。

退会済みユーザー

2018/04/11 02:07

一理御座る。

行動規範の内容に同意します

私も最初にteratailに参加したとき、コードブロックを使わずにコードを書いて注意されたんですよ。
そして、指示に従って修正した後の内容を見るまで、正直なところその注意に十分に得心できていなかったです。その経験を踏まえて、なぜコードブロックを使わない質問者がいなくならないのかを考察すると、おそらく原因は2点に集約されるのではないかと思います。
0. コードブロックのありがたみを「実感」できていない。
0. </>というアイコンに気づいていない、あるいは意味を理解していない。

これについて、もう強制的にコードブロックにしちゃえよという意見がでてくるモチベーションは理解できなくもないのですが、やはり少し乱暴すぎるような気がします。どこまでを強制修正対象とするのかの切り分けが難しいのではないでしょうか。長大な文字列リテラルやコメントに日本語が使ってあればチェックから漏れそうです。また、日本語に不慣れな海外から日本に来ている研修生とかが英語で質問してくるなどといった可能性には配慮しなくていいのでしょうか。

私なりに事態改善のための思い付きを書いてみると、
0. 質問ブロックの「markdown...」の下に、「自分の書いたコードを‘‘‘で囲んで示してください」といった内容の案内を追加する。
0. 追記・修正依頼の項に、プルダウンメニューで定型コメントを入れられるようにする。「コードブロックを使ってください」とか「まずは自分で書いてみたブロックを示してください」とか「お使いのOSや言語を明記してください」とか「質問内容にあったタグをつけてください」とか。テキストだけでなく図や簡単な動画が添付されるようにしてもいいでしょう。

要するに、自動修正というよりは「半自動修正」的な対処が現実的ではないかと考えます。

投稿2018/04/11 03:11

KojiDoi

総合スコア13671

swordone

2018/04/11 03:14

「質問する」の中のコードブロックボタンは<code>となってわかりやすくはなったのですがね。

退会済みユーザー

2018/04/11 03:21 編集

それがしは、「電話番号は半角数字で入力してください」などと申す輩を好まぬ。技術の敗北と存ず。

KojiDoi

2018/04/11 04:45

技術とはTPOを弁えて使うもので、必要ないところに使わないのは敗北ではないです。

退会済みユーザー

2018/04/11 07:42 編集

技術は常に、技術の無きものにこそ寄り添うが寛容かと。

行動規範の内容に同意します

かつて似たような質問があがって議論したことがあります。
参考までにリンクしておきますね。
もう質問はデフォルトでマークダウン使えなくていいんじゃないでしょうか？
ソースコードぐらいは```で囲んで欲しい！

2年くらい経過しているのに改善されないので、運営側は対処する気はないように思えますね。

投稿2018/04/11 02:11

ttyp03

総合スコア16998

退会済みユーザー

2018/04/11 02:13

他にすべき事が山積みで幹を太くしていた当時と比べ、今は枝葉を整えるべき段階に至ったと存ず。

行動規範の内容に同意します

誤って囲われるのが避けられないので自動化は好きではないです。

最近、ポイントとか順位とかあまり気にしなくなってきたので、読みづらいのはスルーしています。

とはいえ、スルーは質問者も回答者も運営者も得しないので。低評価の理由で”コードがブロックで括られていない”ってくらいは追加してほしいと思っています。

投稿2018/04/11 14:17

iwamoto_takaaki

総合スコア2883

退会済みユーザー

2018/04/12 00:25

間違うても構わぬ。正せばよい。

iwamoto_takaaki

2018/04/12 00:52

その辺は殆ど好みの問題かと・・・どうしてもWordと同じになりそうな印象があってさ。

行動規範の内容に同意します

本気で回答者さんに伝えたい、と思う人は投稿した後も見た目を振り返って編集しなおすだろうからこのままでいいんじゃないでしょうかね？
見た目だけで質問者さんの本気度が分かりますし。

投稿2018/04/11 02:06

yoorwm

総合スコア1305

退会済みユーザー

2018/04/11 02:09

コードブロックの存在すら理解できぬ者もおろう。

行動規範の内容に同意します

コードボタンを押したときのユーザビリティは確かに微妙かもしれませんね。

Plain
1```ここに言語を入力
2コード
3` ` `

ここに言語を入力、にまずフォーカスが当たるやつ、コードを貼り付けたあとでもいいじゃないかと思います。

投稿2018/04/11 02:04

kazto

総合スコア7196

maisumakun

2018/04/11 02:05

本題とは関係ないですけど、「Plain Text」モードなんてのがあるんですね。

退会済みユーザー

2018/04/11 02:06

フォーカスについてはおっしゃる通りであろうぞ。

行動規範の内容に同意します

質問投稿時にポップアップで prview を出し。それをページ末尾までスクロースさせないと登録終了できないようにするとよいと思う。
そうすれば、投稿時にコード部分が変なことに自然に気がつく。

さらに、
preview 画面でコード部分と推定できるのにコードグロックとなっていない部分に対して、
warning 表示し、fotfix でコードブロックに修正する方法を選べるようにする。

投稿2018/04/14 23:27

katoy

総合スコア22324

x_x

2018/04/16 09:17

確認しないとそなっちゃいますね

行動規範の内容に同意します

正確に判定するのが難しい。
99.9%当たられたとしても、外れた場合に簡単に修正できないと

投稿2018/04/11 07:12

x_x

総合スコア13749

退会済みユーザー

2018/04/11 07:37

自動サポートで囲んだコードブロックについて、確認画面で解除するボタンを表示添えるのが肝要かと存ず。

x_x

2018/04/11 07:41

さようですね

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

teratailはそろそろ、英字がたくさんある塊は自動的にcodeブロックにする機能を搭載した方が良い気がするのは気のせいかについて。

追記

関連した質問