How to write multiple language code snippets in MkDocs

MkDocs is using markdown to generate documents on static web pages.

Recently, I was working on writing documents for a iOS project. In iOS, I would need to document 2 programming languages: Objective-C & Swift. If I write them in two separate code snippets, that would be very unreadable. So to improve the readability, I decided to put them together by using HTML Tabs.

We will need to use custom configuration to let MkDocs generate those HTML syntax with the javascript and CSS.

In mkdocs.yaml, specify the js and CSS files used for the tabs.

extra_css:
    - styles/tab.css
extra_javascript:
    - custom/tab.js

Javascript: when clicks the tab, it will hide others tab contents.

function openCode(codeName, elmnt, color) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
tablinks[i].style.color = "black";
}

// Show the specific tabs content
var elements = document.getElementsByClassName(codeName);
for (i = 0; i< elements.length; i++) {
elements[i].style.display = "block";
}

// Add the specific color to the button used to open the tab content
elements = document.getElementsByClassName(elmnt.className);
for (i = 0; i< elements.length; i++) {
elements[i].style.backgroundColor = color;
elements[i].style.color = "white";
}
}

// Get the element with id="defaultOpen" and click on it
if(document.getElementsByClassName("objbutton") !== null){
var elements = document.getElementsByClassName("objbutton");
for (i = 0; i< elements.length; i++) {
elements[i].click();
}
}

CSS: for Tab styling

/* Style the tab buttons */
.tablink {
    color: black;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px;
    font-size: 12px;
    width: 100px;
}

/* Change background color of buttons on hover */
.tablink:hover {
    background-color: #777;
}


/* Set default styles for tab content */
.tabcontent {
    color: black;
    display: none;
}

/* Style each tab content individually */ 
#Obj {background-color:white;}
#Swift {background-color:white;}

Then finally in markdown file, we can easily create a multi-language code snippet.

<button class="tablink objbutton" onclick="openCode('obj', this, '#03a9f4')" markdown="1">Objective-C</button> 
<button class="tablink swiftbutton" onclick="openCode('swift', this, '#03a9f4')" markdown="1">Swift</button> 

 

<div class="obj tabcontent"> 
```objectivec 
Your objective-c code goes here.
``` 
</div>

 

<div class="swift tabcontent"> 
```swift 
Your swift code goes here.
``` 
</div>

 

In HTML tags, the markdown="1" tells MkDocs do not parse its content so it will be generated as normal HTML syntax.

Here it is how it looks like.

Advertisements

How to create iOS fat dynamic framework

“Fat” means that this framework has many slices. Each slice (machine code) is built for certain architecture. The fat framework we are going to build contains i386 x86_64 armv7 armv7s arm64.

  • armv7 is for iPhone 4s
  • armv7s is for iPhone 5
  • arm64 is for iPhone 6

Firstly we need to create a target for dynamic framework: Cocoa Touch Framework

Secondly we create a new target: External Build System

Go to Build Phases -> Run script

Paste the below code snippet in there

 

#!/bin/sh
UNIVERSAL_OUTPUTFOLDER=${BUILD_DIR}/${CONFIGURATION}-universal
# make sure the output directory exists
mkdir -p "${UNIVERSAL_OUTPUTFOLDER}"
# Step 1. Build Device and Simulator versions
xcodebuild -target "${PROJECT_NAME}" ONLY_ACTIVE_ARCH=NO -configuration ${CONFIGURATION} -sdk iphoneos BUILD_DIR="${BUILD_DIR}" BUILD_ROOT="${BUILD_ROOT}" clean build
xcodebuild -target "${PROJECT_NAME}" -configuration ${CONFIGURATION} -sdk iphonesimulator ONLY_ACTIVE_ARCH=NO BUILD_DIR="${BUILD_DIR}" BUILD_ROOT="${BUILD_ROOT}" clean build
# Step 2. Copy the framework structure (from iphoneos build) to the universal folder
cp -R "${BUILD_DIR}/${CONFIGURATION}-iphoneos/${PROJECT_NAME}.framework" "${UNIVERSAL_OUTPUTFOLDER}/"
# Step 4. Create universal binary file using lipo and place the combined executable in the copied framework directory
lipo -create -output "${UNIVERSAL_OUTPUTFOLDER}/${PROJECT_NAME}.framework/${PROJECT_NAME}" "${BUILD_DIR}/${CONFIGURATION}-iphonesimulator/${PROJECT_NAME}.framework/${PROJECT_NAME}" "${BUILD_DIR}/${CONFIGURATION}-iphoneos/${PROJECT_NAME}.framework/${PROJECT_NAME}"
# Step 5. Convenience step to copy the framework to desktop directory
ditto "${UNIVERSAL_OUTPUTFOLDER}/${PROJECT_NAME}.framework" "${HOME}/Desktop/${PROJECT_NAME}.framework"

Build it then your fat dynamic framework will be located on your desktop! Before submitting the App to AppStore, you must strip off the simulator slice (i386 x86_64) from the framework

lipo -remove i386 Name.framework/Name -output Path/name

lipo -remove x86_64 Name.framework/Name -output Path/name

Or you can refer to this solution:

http://ikennd.ac/blog/2015/02/stripping-unwanted-architectures-from-dynamic-libraries-in-xcode/

 

Logitech G213 Prodigy Keyboard

My first mechanical keyboard was CM Storm QuickFire TK. I likes its CHERRY MX RED Switches. Unfortunately, it did not come along with me to Australia. I had to use MacBook’s keyboard for 9 months. Finally, G213 caught my eyes with its shiny LED lights, and very fair price.

G213 supports OS X, its multimedia buttons are functional, including playing iTunes music, lower/raise the volume.

Though, it is not a mechanical keyboard, its keys actually provides a similar feeling as using cherry red switches. Nonetheless, the sound of clicking is not so clear and sharp as cherry red switches.

Its RGB lights are bright, and the keyboard can support multiple colors in 4 zones at once.

For this fair price, 70AUD, it worths purchasing.

GoPro 5 Black is here!

關注於動作攝影機已有兩三年了吧,一直在Sony 與 GoPro之間遊蕩。為了即將開始的Road Trip,有恰當的理由可以入手了!可以錄起我最愛的運動:衝浪,滑板,滑雪,潛水!

IMG_8816.JPG
car charger, 3 way stick, GoPro 5, 2 batteries(Wasabi) with charger, head strap, quick clip.

Choice of memory card for 4K recording

71jd1eygcol
SanDisk Extreme 128GB
proplus64g_001_front_darkgrey
Samsung Pro Plus 64GB

I bought the SanDisk Extreme 128GB first, then I found out that it is incompatible with GoPro 5 Black. After searching online, it seems that every SanDisk card with UHS-speed 3 has issue.
Then I got another one which is Samsung Pro plus 64GB, which works well.

 

Whilst using SanDisk Extreme, I had to insert and remove the SD card 4 or 5 times to get it work when the GoPro is on. This is very annoying and it is impossible to do that when you are doing sports.


 

Updated: After the firmware v1.57 of GoPro5, SanDisk Extreme 128GB works really well!!!

Osaka Universal Studio 大阪 環球影城

歡迎來到 Universal Studio

當時因在早稻田留學,幸運地認識了一位很好的朋友。當學期才剛開始,我們便去了熊本、阿蘇火山。這次從福岡坐夜行巴士,花了七小時之多,才抵達大阪梅田。先獻上一張梅田的夜景。

img_7058

這是在梅田空中庭院上拍的,空中庭園下面就是夜行巴士的車站。當我們抵達售票口時,恰好是結束售票的時間。幸好一旁的工作人員,帶我們到隔壁的商店買票入場。人生第一次看到如此光亮的城市,從各個方位看出去,光一直延續到地平面才消失,嘆為觀止。

門票的部分,我們在網路上已經先訂好了Express 7,可以快速通關七項遊樂設施。進場時,出示QR Code便可以,不需有紙本票根。如果有購買快速通關的話,就不需要花太多時間排隊囉,真的挺貴的。但是逆轉世界這項遊樂設施還是排了挺久的,一個多小時吧。如果沒有快速通關大概要兩三小時吧….

img_6879
魔鬼終結者2

魔鬼終結者的劇場大概有挺久的歷史了,但其視覺效果震撼度,有閃光,火焰,氣體。是所有劇場最好刺激的。而且居然不用排隊,實在太幸運了。

img_6910
來到侏儸紀世界必吃的豬肋排要價1300円

img_6906

在侏羅紀樂園,恐龍會不時的出沒,並且遊走在街上,嚇壞小朋友。管理員會拿散彈槍嚇阻恐龍。

侏羅紀這區最有名的就是飛天翼龍了,只可惜我沒玩到,因為我們買的快速通關中沒有包含這個設施。還有風太大的時候不會營運唷。

img_6932

很多麻瓜來USJ,大概都是為了來參觀一下霍格華滋吧!

霍格華滋提供了軌道列車搭載4K3D影院,感覺就像法國迪士尼的L’Aventure Totalement Toquée de Rémy 料理鼠王的實境歷險。不過霍格華滋的刺激度更上一層樓,坐完可能會暈眩唷,因人而異。這項設施有快速通關的話,可以節省不少時間,我幾乎沒有花到什麼等待的時間。

img_6927
麻瓜們看著魔法師展現漂浮術
img_6964
巷子裡可有驚喜呢!
img_6951
這個遊樂設施跟逆轉世界比…等待的時間也挺久的 >_<
img_6940
個人覺得最有趣的遊行就是小小兵消防隊啦,可愛的程度吸引不少人向前自拍呢。

這趟大阪之行,目標就是對準環球影城而來,並沒有去其他的景點了。

開學中,抓緊空閒的一天,衝去很遠的地方玩,一天來回坐夜巴,利用年輕的本錢,如此盡興地玩。

時光雖短卻記憶猶新。

Intel Galileo 2 FTDI cable serial connection tutorial on Mac OS X

First of all, you will need

  • Intel Galileo 2 (Linux installed)
  • FTDI  TTL-232R cable

Step 1.

Install FTDI VCP driver from here

Step 2.

Reboot your computer

Step 3.

Connect FTDI Cable to your computer

Step 4.

Open terminal.app

ls /dev/tty.*

You should now see

/dev/tty.usbserial-XXXXXXXX

Step 5.

screen /dev/tty.usbserial-XXXXXXXX 115200 -L

 

Step 6.

If you see blank, press Enter twice.

Then you will see the login request.

Step 7.

Login as root

Step 8.

You are now connected to Intel Galileo 2.

 

Notes:

With Mac OS 10.9 (Mavericks) and later, Apple has built their own version of the FTDI VCP driver into the operating system (AN134). However, there seems to be some conflict between drivers from FTDIchip.com and the ones inherent to Apple. Luckily, there is a solution to this problem, and it comes from FTDI directly.

If you have that issues, solution is referred to this site: https://learn.sparkfun.com/tutorials/how-to-install-ftdi-drivers/mac