Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブKD

2014年1月15日 By KD コメントを書く

[tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

[tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタックスハイライトしなくてもいいかなあと思ってしまうこともままありますが、ハイライトしていないソースコードだと誰も見てくれないと思うので、きれいに表示することにしましょう。

シンタックスハイライトの下準備

Tumblrでシンタックスハイライトをするメジャーな方法は、SyntaxHighlighterを使うことです。こういう便利なスクリプトを作ってれる人が多くて助かりますね。それではやってみましょう。

(1)使いたいプログラミング言語のスクリプトを取得する。

SyntaxHighlighterのスクリプトを生成するページがあるので、ここで取得するのが簡単です。

(2)SyntaxHighlighterのスクリプトをTumblrのHTMLの<head>セクションに追加。

TumblrのHTMLは「カスタマイズ -> HTML編集」から編集可能です。

SyntaxHighlighterのスクリプトの例は以下になります。てっとりばやくSyntaxHighlighterが対応している言語をすべて設定しています。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

シンタックスハイライトを使う

対応している言語でソースコードを書いて、シンタックスハイライトを使ってみましょう。今回はPythonです。

各記事の「<html>」を開き、ソースコードを書いたら、「<pre class=“brush:プログラミング言語名”></pre>」で囲むとシンタックスハイライトされます。以下はPythonコードなので、「<pre class=“brush:python”></pre>」で囲っています。

def main():
x = "hoge"
y = "fuga"
print(x + y)
if __name__ == '__main__':
main()

ソースコードをきれいに表示させることができました。これで、私も含めてプログラマの方々は安心して技術ブログが書けますね。

カテゴリ : 技術 Tips & Tutorials タグ : syntax highlighting, tips, tumbler, tumblr-imported

2014年1月13日 By KD コメントを書く

[tips][Sublime Text] Sublime Text 3でPackage Controlを使う時のproxyの設定方法

[tips][Sublime Text] Sublime Text 3でPackage Controlを使う時のproxyの設定方法

前回はSublime Text 3をインストールして最初にすることに関して説明しました。

基本的にはそれOKなのですが、家で設定ができても、職場でエラーが出てうまくいかないケースがあります。今回はプロキシ問題に関する対処方法を紹介します。

[tips][Sublime Text] Sublime Text 3をインストールしたらまずやること

「Package Control」をコマンドラインからインターネット経由でインストールする場合のエラー

Ctrl + `でコマンドラインを表示してから、以下のコマンドを実行して、失敗した場合の対処方法です。

import urllib.request,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(’ ’, ’%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

(1)「urllib.error.HTTPError: HTTP Error 407: 407」
原因は、プロキシです。
以下のようにコマンドにプロキシ設定を追加して実行しましょう。

import urllib.request,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler({‘http’: ‘http://プロキシのユーザ名:プロキシのパスワード@プロキシサーバのアドレス:ポート番号’})) ); by = urllib.request.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(’ ’, ’%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

(2)「Package Control: Error downloading channel. HTTP error 407」
(1)の対処をした場合でも発生する原因不明のエラーです。
「Sublime Text 3」を再起動すれば解決します。バグでしょうか?

「Package Control」を使う場合のエラー

Ctrl + Shift + Pでコマンドパレットを表示してから、「Package Control: Install Package」を使用で失敗した場合の対処方法です。

(1)「package control there are no packages available for installation」
原因は、プロキシです。
「Prefirences -> Package Settings -> Package Control -> Settings – User」にプロキシ設定を追加しましょう。

{
    "http_proxy": "プロキシサーバのアドレス:ポート番号",
    "https_proxy": "プロキシサーバのアドレス:ポート番号",
    "proxy_username": "プロキシのユーザ名",
    "proxy_password": "プロキスのパスワード"
}

(2)「errno 12057」
原因は、SSL証明書の失効を検証できないことです。(類似事例)
以下のインターネットオプションの設定を変更しましょう。
「コントロールパネル -> インターネットオプション -> 詳細設定」
「セキュリティ」項目の「サーバーの証明書失効を確認する*」のチェックをはずしましょう。

これで、プロキシを突破してPackage Contorlを使いこなせますね。

環境

OS : Windows7
Sublime Text : Sublime Text 3

カテゴリ : 技術 Tips & Tutorials タグ : package control, proxy, sublimetext, tumblr-imported, windows

2014年1月12日 By KD コメントを書く

[tips][Sublime Text] Sublime Text 3をインストールしたらまずやること

[tips][Sublime Text] Sublime Text 3をインストールしたらまずやること

最近お気に入りのエディタ「Sublime Text 3」のインストールしたら最初にやることを紹介します。プログラミングするには最適なエディタだと思います。環境はWindowsですが、やることはMacと変わりません。(Macの人はショートカットが多少変わるので、適宜調べてください)

1. 「Sublime Text 3」のインストール

(1)Windows用インストーラをダウンロードし、インストールする。
(2)「sublime_text.exe」を起動する。

2. 「Package Control」のインストール

「Package Control」はSublime Textにパッケージを入れるためのパッケージ管理ツールです。

2-1. インターネット経由でインストール

(1)ショートカット「Ctrl + `」でコマンドライン表示。
(2)コマンドラインに以下を入力して実行する。

import urllib.request,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(’ ’, ’%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

2-2. ZIPファイルからインストール

(1)「Package Control」のZIPファイル をダウンロードし、解凍する。
「3 Download Package Control.sublime-package …」のところにリンクがあります。
(2)(1)で解凍したフォルダを「Preferences -> Browes Packages」に配置し、Sublime Textを再起動する。

2-3. 「Package Control」の検索

(1)ショートカット「Ctrl + Shift + P」でコマンドパレットを表示。

(2)「install」と入力して、「Package Control: Install Package」を選択します。「Package Control」用の検索画面が出たら、パッケージを検索できます。

3. 日本語のインライン化(Windowsのみ)

Sublime Textはデフォルトだと日本語入力の時に小窓が表示され、使いにくいので、インライン化します。
「IMESupport」は、日本語のインライン化をしてくれるパッケージです。

(1)「Package Control」で「IMESupport」を検索してインストールします。

(2)(1)で失敗する場合は、GitHubのZIPをダウンロードして、解凍したフォルダを「Preferences -> Browes Packages」に配置し、Sublime Textを再起動する。

4. 文字コード対応

Sublime TextはデフォルトだとUTF-8しか扱えないため、Shift-JIS等の日本語のファイルを開くと文字化けしてしまいます。
「ConvertToUTF8」は、Shift-JIS等の日本語のファイルを文字化けせずにUTF-8に変換してくれるパッケージです。保存時は元の文字コードで保存されます。

(1)「Package Control」で「ConvertToUTF8」を検索してインストールします。

(2)(1)で失敗する場合は、GitHubのZIPをダウンロードして、解凍したフォルダを「Preferences -> Browes Packages」に配置し、Sublime Textを再起動する。

MacやLinuxの場合はCodecs33を合わせてインストールする必要があります。

5. Sublime Textの設定

Sublime Textを使いやすくするための設定の一例になります。
「Preference -> Settings – User」に以下を追記し、Sublime Textを再起動する。

{
    "font_face": "Consolas", // フォント(人気なのは”Ricty”、”Consolas”、”Panic Sans”)
    "font_size": 10, //フォントサイズ
    "line_padding_top": 5, //行間
    "tab_size": 4, //タブサイズ(デザイナやPythonユーザは4、Rubyユーザは2)
    "draw_white_space": "all", //タブやスペースなどの不過視文字を表示
    "highlight_line": true, //現在の選択行をハイライト表示
    "trim_trailing_white_space_on_save": true, //空白の削除
    "word_wrap": true, //自動改行
    "translate_tabs_to_spaces": true, // タブをスペースに変換
    "default_encoding": "UTF-8", // デフォルトのエンコーディングの文字コード
    "fallback_encoding": "UTF-8", // 文字コードが不明なファイルのエンコーディングの文字コード
    "show_encoding": true, // エンコーディングの文字コードを右下のステータスバーに表示
}

6. 全角スペースのハイライト

5の設定をすると半角スペースの判別が簡単になるのですが、全角スペースの判別が難しいままです。
「TrailingSpaces.sublime-package」のパッケージを入れる

(1)「Package Control」で「TrailingSpaces.sublime-package」を検索してインストールします。

(2)(1)で失敗する場合は、GitHubのZIPをダウンロードして、解凍したフォルダを「Preferences -> Browes Packages」に配置し、Sublime Textを再起動する。

(3)「Preferances -> Package Settings -> Trailing Spaces -> Settings – User」に以下を追記し、Sublime Textを再起動する。

{
    "trailing_spaces_regexp": " |[ t]+", //全角スペースを正規表現に追加
    "trailing_spaces_highlight_color" : "comment", //コメントの色でハイライト
}

7. Subleme Text自体のテーマとカラースキームを変更する。

Subleme Textには多くのテーマがあるのですが、私の使っている「Soda Theme」のテーマとカラースキームを設定します。

7-1. 「Soda Theme」のテーマのインストール

(1)「Package Control」で「Theme – Soda」を検索してインストールします。

(2)(1)で失敗する場合は、GitHubのZIPをダウンロードして、解凍したフォルダを「Preferences -> Browes Packages」に配置し、Sublime Textを再起動する。

(3)「Preference -> Settings – User」に以下を追記し、Sublime Textを再起動する。

{
    "theme": "Soda Light 3.sublime-theme", // テーマを設定
    "soda_classic_tabs": true, // タブを丸みのあるスタイルに設定
    "soda_folder_icons": true, // サイドバーのフォルダアイコンをSoda仕様に設定。
}

7-2. 「Soda Theme」のカラースキームの設定

(1)「Soda Theme」 から「colour-schemes.zip」をダウンロードして、解凍した以下のファイルを「Preference -> Browse Pacakages -> User」配下し、Sublime Textを再起動する。

Espresso Soda.tmTheme
Monokai Soda.tmTheme

(2)「Preference -> Color Scheme -> User」から「Espresso Soda」を選択します。

「Preference -> Settings – User」に以下が追記される。

{
"color_scheme": "Packages/User/Espresso Soda.tmTheme", // カラースキームに「Espresso Soda.tmTheme」を選択
}

これで、十分使える設定になりました。後は、開発に応じて、パッケージを入れていくことで、どんどんパワーアップしてきます。

ちなみに、何かのプログラムを書いて「Ctr + B」を実行すると、実行結果を見ることができます。実行できる言語は「Tools -> Build System」から確認できます。

次回は、Package Cotrolをインストールする上で発生するプロキシ問題について書こうと思います。

環境

OS : Windows7
Sublime Text : Sublime Text 3

カテゴリ : 技術 Tips & Tutorials タグ : sublimetext, tumblr-imported, windows

  • « 前のページ
  • 1
  • …
  • 47
  • 48
  • 49
  • 50
  • 51
  • 次のページ »

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • TumblrからWordPressにブログ移転する最適な方法
    TumblrからWordPressにブログ移転する最適な方法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)
    DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes