使用「Markdown」簡易的語法表達出複雜的HTML文件

-

一、介紹

Markdown 是一種標記語言，它的主要目的是用來作為網路的「寫作用語言」，不是取代 HTML。
Markdown 的重點在於讓文件更「易讀易寫」，因此Markdown只涵蓋純文字可涵蓋的範圍。Markdown 詳細介紹與語法可參考Markdown 台灣網站。

二、dillinger

dillinger 即時將「Markdown」語言編譯成「HTML」的線上工具。

圖一、左邊為 Markdown 語法，右邊為對應的HTML文件

 
圖二、Markdown與HTML對比

三、參考連結

  1. Markdown 台灣網站
  2. dillinger 網站

四、總結

如果需要大量撰寫文件的需求可以考慮使用 Markdown ，它讓你可以編寫的更快速且易閱讀。

留言

張貼留言

這個網誌中的熱門文章

使用「Visual Studio 2019」建置 Windows 服務

-
圖片
一、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 二、建置 Windows 服務專案 圖、開啟 Visual Studio 2019 ，點 建立新的專案 圖、選擇 Windows 服務(.net framework) 圖、輸入相關資訊 圖、選擇 Service1.cs > 滑鼠右鍵 > 檢視原始碼，即可看到 Windows 服務 起初的原始碼 圖、對 專案 > 滑鼠右鍵 > 重建，即可在 bin 資料夾底下見到建置好的結果 三、登錄 Windows 服務 圖、輸入登錄指令 指令 sc create 服務名稱 binpath=D:\服務路徑\XXX.exe start=auto 圖、Windows 服務畫面即可看到剛剛的服務 四、相關連結 使用「SC」指令 登錄、刪除 Windows 服務 五、參考 sc 指令
閱讀完整內容

使用「Vue Cli」建立、打包、安裝 專案

-
圖片
一、介紹 Vue CLI 是由 Vue.js 團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊工具。 二、建置新專案 建立新資料夾 開啟 命令提示字元 切換至 新建立的資料夾 下指令 vue create test 建立 vue 專案 專案名稱 只能是小寫英文、底線、 vue create 專案名稱 選擇 Default 剛建立好的 test 專案 三、啟動新專案 切換至 新建置的專案 下指令 yarn serve yarn serve 打開 瀏覽器 ，輸入網址 http://localhost:8080/ ，即可看到運行的網站 四、打包新專案 切換至 新建置的專案 選擇 public 、 src 、 babel.config.js 、 package.json 、 README.md 後，加壓縮檔案 此檔案即可傳送給其他人使用 五、安裝 打包好的新專案 解壓縮檔案 開啟 命令提示字元 切換至 解壓縮檔案的位置 執行指令 yarn install 安裝相關的套件 yarn install 執行指令 yarn serve 運行專案 yarn serve 打開 瀏覽器 ，輸入網址 http://localhost:8080/ ，即可看到運行的網站 六、相關連結 「Visual Studio Code」安裝與擴充工具安裝 快速開發 Vue.js 工具「Vue CLI」安裝教學 快速的套件管理工具「Yarn」 讓 JavaScript 能在伺服器端執行的環境 「node.js」 使用「Vue Cli」建立、打包、安裝 專案 七、參考 安裝 node.js v14.15.1 yarn node.js vue cli
閱讀完整內容

使用 Visual Studio 2019 實作「RESTful API」

-
圖片
一、介紹 REST 是Roy Thomas Fielding博士於2000年博士論文提出的一種軟體架構風格，目的是讓不同軟體、程式於網路互相傳遞資訊。因為它是一種風格而不是規範，依據筆者的經驗會依照當時的專案或公司規定而決定是否完全遵守。 二、專案架構 圖、Visual Studio 2019 專案架構 三、常用的 HTTP Method 代表用意 GET 讀取 PUT 更新 DELETE 刪除 POST 新增 四、RESTful 路由應用 五、使用 Visual Studio 2019 建置 RESTful API 圖、修改 WebApiConfig.cs 原始碼(C#) public static class WebApiConfig { public static void Register(HttpConfiguration config) { // 針對 JSON 資料使用 camel 案例。 config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); // Web API 設定和服務 // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == ...
閱讀完整內容

如何取得 FaceBook 的「應用程式編號」、「應用程式密鑰」。

-
圖片
一、介紹 本文章將會介紹如何取得 FaceBook 的「應用程式編號」、「應用程式密鑰」。 二、OAuth 2.0 「OAuth 2.0」 是一個開放標準，允許使用者讓第三方應用程式取得該使用者在某個應用程式上的資訊，無須取得該用戶的密碼、帳號。 三、取得FaceBook的「應用程式編號」、「應用程式密鑰」 圖一、使用瀏覽器進入到 facebook developer ，點選 下一步 圖二、輸入 電話號碼 、 確認碼 圖三、點選 開發人員 圖四、點選 建立首款應用程式 圖五、選取 管理企業管理工具 ，再點選 繼續 圖六、輸入 應用程式顯示名稱 、應用程式用途選取 你自己或你的商家 、再點選 繼續 圖七、點選 提交 圖八、FaceBook 登入選擇 設定 圖九、選擇左邊選單的 設定 圖十、輸入 有效的 OAuth 重新導向 URI 圖十一、點選 設定 > 基本資料 ，即可取得 應用程式編號 、 應用程式密鑰 三、取得FB的「存取權杖工具 」 圖一、點選 上方 工具 ，再點選 存取權杖工具 圖二、取得FaceBook應用程式的 存取權杖工具 四、參考 facebook developer OAuth 2.0 facebook 存取權杖 建置一個使用「FaceBook」、「Google」帳號登入的「Asp.net MVC」 網站。
閱讀完整內容

在「Visual Studio 2019」使用「Markdown」撰寫文章

-
圖片
一、介紹 「Markdown」介紹請參照之前文章 使用「Markdown」簡易的語法表達出複雜的HTML文件 「Visual Studio 2019」是微軟的軟體開發整合環境(IDE)產品，詳細用途與介紹請參照 Visual Studio 2019 官網 二、在「Visual Studio 2019」安裝「Markdown」 圖一、打開「延伸模組」 圖二、下載「Markdown」後即可在「Visual Studio 2019」用「Markdown」撰寫文章 三、使用「Markdown」撰寫文章 圖一、新增 md 檔案 圖二、在 md 檔用「Markdown」撰寫文章 四、參考 使用「Markdown」簡易的語法表達出複雜的HTML文件 Visual Studio 2019 官網 IDE wiki
閱讀完整內容

「SonarLint」程式碼品質最佳利器

-
圖片
一、前言 筆者工作的經驗常接手維護先前的專案，因公司以前未導入程式碼品質工具，較容易遇到不易閱讀的程式碼和較特殊的語法。為了日後讓大家撰寫程式能盡量一致、好閱讀，因此引入程式碼品質工具 SonarLint ， SonarLint 提供程式碼的建議和規範，讓新進員工或老員工能有較一致的程式碼寫法。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、SonarLit for Visual Studio 2019 安裝 圖、延伸模組 > 管理延伸模組 圖、選擇 SonarLit for Visual Studio 2019  > 下載 圖、安裝前先關閉 SonarLit for Visual Studio 2019 ，再安裝 圖、安裝後 SonarLit for Visual Studio 2019 會有 SonarLit 的提示 四、安裝前後的比較 圖、安裝前後的比較 五、相關連結 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站 「軟體三層式架構」介紹與實作 使用「Visual Studio 2019」建置單元測試專案
閱讀完整內容

如何傳送訊息至「Teams」的 Channel

-
圖片
一、介紹 Microsoft Teams 為微軟旗下的通訊軟體，它整合聊天、視訊、Office 365、Execel、Word、OneNote…等功能。 比爾蓋茲提出 Skype for Business 的想法，因此有了 Microsoft Teams 這個產品，為了與 Slack…等商用軟體相抗衡。 二、 Nuget 安裝 Newtonsoft.Json 12.0.3 三、Incoming WebHook 設定 訊息可藉由 Teams 的應用程式 Incoming WebHook 傳輸訊息 圖、點擊 … > 搜尋 Incoming WebHook > 點擊 Incoming WebHook 圖、點擊 新增至團隊 圖、選擇 你的頻道 > 點擊 設定連結器 圖、輸入 WebHook 名稱 > 點擊 建立 圖、複製 WebHook Url > 點擊 完成 四、操作步驟 圖、貼上範例碼，修改成你的 WebHook Url，執行後即可在 Teams 看到 測試訊息 的訊息 範例碼 using (var wc = new WebClient()) { wc.Headers.Add("Content-Type", "application/json"); var data = new { text = "測試訊息" }; var jsonStr = JsonConvert.SerializeObject(data); var bytes = System.Text.Encoding.UTF8.GetBytes(jsonStr); var res = wc.UploadData("https://你的 WebHook Url", bytes); Console.WriteLine(System.Text.Encoding.UTF8.GetString(res)); } 圖、執行結果 五、相關連結 使用「Visual Studio 2019」建置 主控台 Console 應用程式 使用「LINE Messaging API」發送 line 訊息 ...
閱讀完整內容

使用「Visual Studio 2019」建置單元測試專案

-
圖片
一、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 二、專案架構 圖、專案架構 三、操作步驟 圖、開啟 Visual Studio 2019 > 建立方案資料夾 Test > 對 Test 滑鼠右鍵 > 選擇 加入 > 新增專案 圖、選擇 單元測試專案 圖、輸入 單元測試專案 相關資訊 圖、選擇 WebService 專案 > 建立 TestService.cs > 輸入以下 原始碼 原始碼 public List<int> GetTest() { return new List<int> { 1 }; } 圖、對剛剛的原始碼 滑鼠右鍵 > 建立單元測試 圖、輸入 單元測試 基本資訊 圖、開啟 TestServcieTests.cs 輸入以下 原始碼 原始碼 [TestMethod()] public void GetTestTest() { var ts = new TestServcie(); var data = ts.GetTest(); Assert.IsTrue(data.Count() == 1); } 圖、對 WebUnitTestProject 專案 滑鼠 右鍵 > 執行測試 圖、結果 四、相關連結 「軟體三層式架構」介紹與實作 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站
閱讀完整內容

「Visual Studio Code」安裝與擴充工具安裝

-
圖片
一、介紹 Visual Studio Code 是微軟開發且跨平台的原始碼編輯器。 二、 安裝 進入 「官網」 ，點擊 Download 安裝 下載的檔案 選 我同意 ，再按 下一步 選 建立桌面圖示 ，再按 下一步 按 安裝 安裝中 按 完成 三、擴充套件安裝       1. 按 紅色框起來的 extions 圖示       2. 搜尋 HTML ，安裝 HTML Snippets       3.  安裝 HTML Preview       4.  搜尋 Vetur ，安裝 Vetur 四、相關連結 「Visual Studio Code」安裝與擴充工具安裝 快速開發 Vue.js 工具「Vue CLI」安裝教學 快速的套件管理工具「Yarn」 讓 JavaScript 能在伺服器端執行的環境 「node.js」 使用「Vue Cli」建立、打包、安裝 專案 五、參考連結 Visual Studio Code
閱讀完整內容