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

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

ただいまの
回答率

90.47%

  • Linux

    3902questions

    Linuxは、Unixをベースにして開発されたオペレーティングシステムです。日本では「リナックス」と呼ばれています。 主にWebサーバやDNSサーバ、イントラネットなどのサーバ用OSとして利用されています。 上位500のスーパーコンピュータの90%以上はLinuxを使用しています。 携帯端末用のプラットフォームAndroidは、Linuxカーネル上に構築されています。

  • Visual Studio Code

    281questions

    Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

vscode、markdownプレビューcssの反映のさせ方について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,924

roronoazoro

score 61

現在下記手順、サイトを参考にvscodeのマークダウンプレビューの背景色を白くしたいと考えています。

  1. 設定(settings.json)を変更してCSSを読み込ませる
  2. 指定したフォルダにCSSファイルを置く。
  3. 再起動、反映

VS Code のMarkdownプレビューをCSSでカスタマイズする

#--settings.jsonファイル
      "editor.detectIndentation": false, 
      // ウィンドウの端で改行する
      "editor.wordWrap": "on",
      // 既定の改行文字 \n => Unix, \r\n => Windows
      "files.eol": "\n",
      // 既定の文字コード
      "files.encoding": "utf8",
      // 文字コードを自動で推測する
      "files.autoGuessEncoding": false,
      // タブのプレビュー機能を使用しない
      "workbench.editor.enablePreview": false,
      // インデントガイドを表示する
      "editor.renderIndentGuides": true, 
      // 制御文字を表示をしない
      "editor.renderControlCharacters": true, 
      // 自動で閉じ文字を挿入をしない
      "editor.autoClosingBrackets": false,
      // 折りたたみ機能を使用しない
      "editor.folding": false, 
      // カーソル点滅
      "editor.cursorBlinking": "smooth",
      // 現在行のハイライト
      "editor.renderLineHighlight": "all",
      // ファイルの末尾は改行で終わらせる
      "files.insertFinalNewline": true,
      // エディターの末尾でスクロールを止めない
      "editor.scrollBeyondLastLine": false,
      // 文字の区切り
      "editor.wordSeparators": "`~!#%^&*()-=+[{]}\\|;:'\",.<>/?",
      // スクロール量
      "editor.mouseWheelScrollSensitivity": 3,
      // HTML 1 行あたりの最大文字数 (0 = 無効にする)
      "html.format.wrapLineLength": 0,
      // ミニマップを非表示
      "editor.minimap.enabled": true,
      // アクティビティバーを表示する
      "workbench.activityBar.visible": true,
      // ステータスバーを表示する
      "workbench.statusBar.visible": true,
      // ブレークポイントを使用しない
      "editor.glyphMargin": false,
      // 配色テーマ (v1.10から設定可能)
      "workbench.colorTheme": "Monokai",
      // ファイルアイコンテーマ (v1.10から設定可能)
        "workbench.iconheme": "material-icon-theme",
        // マークダウンプレビューcss
        "markdown.styles": [
            "C:/Users/ユーザ名/.vscode/md_preview.css"
        ]
}



#--.vscode直下にcssファイルを設置
~/.vscode/md_preview.css


この操作を行なった後に再起動してもうまく反映されません。
原因わかるかたいましたら教えていただけると助かります。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mattn

    2017/09/09 22:55

    vim は関係ないのでタグから外しておいてください。

    キャンセル

  • roronoazoro

    2017/09/10 07:16

    失礼しました。修正いたしました。

    キャンセル

回答 1

checkベストアンサー

0

URLエンコードはしていますでしょうか?また、下記のようなパスの形式にしなければなりません。

パスにスペースがある場合は、URLエンコードさてなければならないのでパスにスペースがある場合は下記のようになります。また、ユーザ名やディレクトリに全角文字列がある場合もURLエンコードしなければなりません。

■AAA BBB(←ディレクトリ or ファイル名)
パス:AAA%20BBB

URLエンコードは例えば下記のようなサイトでできます。
http://www.tagindex.com/tool/url.html

"markdown.styles": ["file:///Users/ユーザ名/.vscode/md_preview.css"]

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/10 07:16

    ご回答ありがとうございます。
    C:→fileにしましたところ適用されました。
    Macだとトップ階層がfileから始まるという解釈で大丈夫でしょうか?

    キャンセル

  • 2017/09/10 11:11

    >Macだとトップ階層がfileから始まるという解釈で大丈夫でしょうか?

    「file://」で始まるのはファイルをURLスキームで表現しているのでこうなります。フォーマットは下記になり、ホストがローカルホストの場合は「ホスト名」を省略することができます。
    --
    file://ホスト名/パス
    file:///パス (←ローカルホストの場合)

    ■Windowsの場合
    file:///c:/パス
    file:///d:/パス
    ※ドライブレターを含めたフルパス(\ → / に置き換え)

    ■Macの場合
    file:///パス

    ※マニュアルは下記のようになってます。
    https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations

    HTMLファイルを作成してダブルクリックでブラウザに開くと、URLのロケーションバーに「file:///HTMLファイルのパス」が表示されると思います。

    キャンセル

  • 2017/09/10 20:55

    詳しいご説明ありがとうございます。
    勉強になりました。

    キャンセル

関連した質問

  • 受付中

    モーダルダイアログをスクロールしたい

    前回の投稿の続きです。 モーダルダイアログをリサイズしたい 前回の悩みは回答者様のおかげで解決することができたのですが、新たな課題が発生しました。 というのも高さの大

  • 解決済

    WordPressでajaxでの画像データ渡しができない

    お世話になります。 WordPressのユーザページ上からajaxを使い画像投稿をさせたいのですが、 画像ファイルを渡そうとするとコケてしまいます。 画像ファイルがちゃん

  • 解決済

    Vue.jsでリストレンダリング内で表示制御をしたい

    前提・実現したいこと vue.jsでリストレンダリング内で表示制御をしたい。テーブルのインデックス数と同じ要素数の配列を用意し、bool値を入れる。bool値を見て、テーブルの表

  • 解決済

    Visual Studio CodeでC言語の参照ジャンプができない

    表題の通りvscode環境でC言語のタグジャンプ(参照箇所に飛ぶ)の方法がわからりません。やりたいこととしては、複数のファイルに分割されている場合に、関数定義から参照箇所のリストを

  • 解決済

    VSCodeでGitBashを使う(win)

    VSCodeを使い始めました。 便利です! GitBashを利用したいなと思い、標準でpowershellになっているところをgitbashに変更しました。 "termin

  • 解決済

    VS Code 折り返し設定

    マークダウンの文章を記述している際のVS Codeの折り返し設定をやめたいのですが上手く行きません。 文章を途中で折り返されるのが非常に鬱陶しいためこの設定を切りたいです。 A

  • 解決済

    includePathが反映されない/VSCodeでのC言語環境構築

    現在Visual Studio Codeにて、C言語の勉強をしています。 #include <stdio.h> の部分に電球のマークと、includePathを設定しろとの警告

  • 解決済

    vscodeで説明文を消したい

     vscodeでの下記の説明文を非表示にしたい  試したことのsettingを色々試す { "typescript.check.npmIsInstalled": false,

同じタグがついた質問を見る

  • Linux

    3902questions

    Linuxは、Unixをベースにして開発されたオペレーティングシステムです。日本では「リナックス」と呼ばれています。 主にWebサーバやDNSサーバ、イントラネットなどのサーバ用OSとして利用されています。 上位500のスーパーコンピュータの90%以上はLinuxを使用しています。 携帯端末用のプラットフォームAndroidは、Linuxカーネル上に構築されています。

  • Visual Studio Code

    281questions

    Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。