2020/04/02

網站 / 在網頁內容顯示程式碼語法-Syntax highlighting

4月 02, 2020

在可以自己完整編輯的網頁，可以利用javescript控制文字效果做出Syntax highlighting

但是在WordPress架構的網站除非修改核心php內容，否則無法直接套用javescript

嘗試使用Code Snippets添加格式化程式碼語法，但是會出現錯誤，所以還是往WordPress外掛來尋求解決方式

1.在找到的教學中，原來WordPress編輯器的<code>就能夠以程式碼的方式來呈現，但無法呈現文字色彩標註，而且有些語法無法用這個方式，像是引用iframe就還是會執行

2.可以用Code Syntax Block增加程式語言的支援，增加程式碼文字色彩以及顯示行數，但就必須用區塊編輯器而不是傳統編輯器了

以下是 youtube的iframe嵌入程式碼

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/sg_WE0ToJjM" frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen>
</iframe>

3.線上轉換器，透過Html產生table包覆，CSS增加突顯色彩

1
2
3

<iframe 
width="560" height="315" src="https://www.youtube.com/embed/sg_WE0ToJjM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture" allowfullscreen>
</iframe>

4.如果要顯示短代碼，可以在短代碼外面再加上一層[ ]

例如：[ [短代碼] ]

參考資料

1.Code Syntax Block：为古腾堡的代码区块添加高亮显示-連結
2.線上轉換器-網站

繼續閱讀

網站 / Google Map嵌入頁面(2021/10/9修改)

4月 02, 2020

如何將google map嵌入WordPress頁面

在文章內容裡需要用到 html、 css 與 javascript
但是無法直接透過WordPress的文字編輯器來輸入這些程式碼 (至少對現階段的我是如此)
查了很多教學之後
使用了兩個外掛

1.Code Embed

1. Code Snippets

編輯套用的css，將程式碼加在<head></head>之間

2. php everywhere

利用php echo的功能輸出 html 與 javascript
搭配php everywhere將短碼標註在文章裡

2. google maps javascript api的設定

如果只是基本嵌入只需要 google maps embed api，取得金鑰 (詳細方法可以看參考資料)
要進一步控制地圖的呈現內容就要用 google maps javascript api

整體流程如下：

1.設定放置地圖的Div (範例是 map)

2.在Code Embed 設定div #map 的css樣式,以及要套用的api(設定地圖中心點、地標等等)

<style type='text/css'>
	#map { height: 400px; width:100%; }
</style>
<script type="text/javascript">
	var map; 
	var marke; 
	var position = {lat: 25.027705,lng: 121.529389}; 
	function initMap() { 
		map = new google.maps.Map(document.getElementById('map'), 
			{ center: position, zoom: 16 }); marker = new google.maps.Marker(
				{ position: position, map: map, title:"師大圖書館校區教育學院大樓", }
				); 
			}
</script> 

<script type="text/javascript" 
	src="https://maps.googleapis.com/maps/api/js?key=***************************************&callback=initMap" async defer> 
</script>

<div id="map"></div>